

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/blog/img/favicon.png">
  <link rel="icon" href="/blog/img/favicon.jpg">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
  <title>宿舍管理系统开发笔记 - ITaylorfan的小站</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/blog/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/blog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"itaylorfan.gitee.io","root":"/blog/","version":"1.8.11","typing":{"enable":true,"typeSpeed":70,"cursorChar":"❤","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/blog/js/utils.js" ></script>
  <script  src="/blog/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
  <header style="height: 85vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/blog/">&nbsp;<strong>ITaylorfan</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/blog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/blog/img/TS8-10-9.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="宿舍管理系统开发笔记">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-12-06 10:51" pubdate>
        2021年12月6日 上午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      17.6k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      271
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">宿舍管理系统开发笔记</h1>
            
            <div class="markdown-body">
              <ul>
<li>项目名称：宿舍管理系统 </li>
<li>项目平台：ndoejs+mysql</li>
<li>项目技术：express</li>
</ul>
<hr>
<h3 id="项目架构图"><a href="#项目架构图" class="headerlink" title="项目架构图"></a>项目架构图</h3><p><img src="https://pic.imgdb.cn/item/61789d592ab3f51d91909cb7.png" srcset="/blog/img/loading.gif" lazyload alt="架构图"></p>
<h3 id="一、初始化项目"><a href="#一、初始化项目" class="headerlink" title="一、初始化项目"></a>一、初始化项目</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm init --yes<br></code></pre></td></tr></table></figure>

<h3 id="二、安装项目依赖"><a href="#二、安装项目依赖" class="headerlink" title="二、安装项目依赖"></a>二、安装项目依赖</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install mysql express --save<br></code></pre></td></tr></table></figure>

<h3 id="三、创建express项目"><a href="#三、创建express项目" class="headerlink" title="三、创建express项目"></a>三、创建express项目</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;express&quot;</span>);<br><span class="hljs-keyword">const</span> http = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;http&quot;</span>);<br><span class="hljs-keyword">const</span> app = express();<br><span class="hljs-keyword">const</span> server = http.createServer(app);<br><br><br>server.listen(<span class="hljs-number">8080</span>, <span class="hljs-string">&quot;0.0.0.0&quot;</span>, <span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;服务器启动成功&quot;</span>);<br>&#125;)<br></code></pre></td></tr></table></figure>

<h3 id="四、根据模块创建路由"><a href="#四、根据模块创建路由" class="headerlink" title="四、根据模块创建路由"></a>四、根据模块创建路由</h3><p>根据上面的架构图我们要创建三个路由模块</p>
<ol>
<li>创建routes目录</li>
<li>创建<code>adminInfoRoute.js</code>,<code>roomInfoRoute.js</code>，<code>StuInfoRoute.js</code></li>
</ol>
<p>当前我们以<code>routeInfoRoute.js</code>为例来做演示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author </span>杨标</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>roominfo的路由模块 </span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;express&quot;</span>);<br><span class="hljs-keyword">const</span> router = express.Router();<br><br><span class="hljs-built_in">module</span>.exports = router;<br></code></pre></td></tr></table></figure>

<p>接下来在<code>app.js</code>里面使用一级路径来连接路由文件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">app.use(<span class="hljs-string">&quot;/roomInfo&quot;</span>, <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;./routes/roomInfoRoute.js&quot;</span>));<br></code></pre></td></tr></table></figure>

<h3 id="五、完成房间显示的路由请求"><a href="#五、完成房间显示的路由请求" class="headerlink" title="五、完成房间显示的路由请求"></a>五、完成房间显示的路由请求</h3><blockquote>
<p>需求：查询所有的房间信息</p>
</blockquote>
<p>我们现在希望在<code>roomInfoRoute.js</code>里面完成一个请求功能，当请求一个路径的时候，把房间信息显示出来</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.get(<span class="hljs-string">&quot;/roomInfoList&quot;</span>, <span class="hljs-function">(<span class="hljs-params">req, resp</span>) =&gt;</span> &#123;<br>    <span class="hljs-comment">//把数据以json的形式返回出来</span><br>    <span class="hljs-comment">//数据在数据库，所以要找数据库拿数据</span><br>    <span class="hljs-comment">//数据由Servcier，所以我们要找Service</span><br>&#125;)<br></code></pre></td></tr></table></figure>

<h3 id="六、封装mysql的操作过程"><a href="#六、封装mysql的操作过程" class="headerlink" title="六、封装mysql的操作过程"></a>六、封装mysql的操作过程</h3><ol>
<li>新建一个<code>utils</code>的文件夹</li>
<li>在文件夹下面新建一个<code>DBUtils.js</code>文件，封装相应的代码</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>封装数据库操作相关的东西</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@version </span>1.0</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author </span>杨标</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">const</span> mysql = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;mysql&quot;</span>);<br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DBUtils</span> </span>&#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>获取一个数据库连接 </span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;mysql.Connection&#125;</span> </span>返回数据库连接 </span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-function"><span class="hljs-title">getConn</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-keyword">let</span> conn = mysql.createConnection(&#123;<br>            <span class="hljs-attr">host</span>: <span class="hljs-string">&quot;127.0.0.1&quot;</span>,<br>            <span class="hljs-attr">port</span>: <span class="hljs-number">3306</span>,<br>            <span class="hljs-attr">user</span>: <span class="hljs-string">&quot;dev_h2103&quot;</span>,<br>            <span class="hljs-attr">password</span>: <span class="hljs-string">&quot;123456&quot;</span>,<br>            <span class="hljs-attr">database</span>: <span class="hljs-string">&quot;rental_house&quot;</span><br>        &#125;);<br>        <span class="hljs-keyword">return</span> conn;<br>    &#125;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>执行一条SQL语句</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;string&#125;</span> </span>strSql  要执行的SQL语句</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;[]&#125;</span> </span>ps 执行SQL语句的参数 </span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;[]|mysql.OkPacket&gt;&#125;</span> </span>数据库执行的结果</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-function"><span class="hljs-title">executeSql</span>(<span class="hljs-params">strSql, ps = []</span>)</span> &#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br>            <span class="hljs-keyword">let</span> conn = <span class="hljs-built_in">this</span>.getConn();<br>            conn.connect();<br>            conn.query(strSql, ps, <span class="hljs-function">(<span class="hljs-params">error, results</span>) =&gt;</span> &#123;<br>                <span class="hljs-keyword">if</span> (error) &#123;<br>                    reject(error);<br>                &#125;<br>                <span class="hljs-keyword">else</span> &#123;<br>                    resolve(results)<br>                &#125;<br>                conn.end();<br>            &#125;);<br>        &#125;);<br>    &#125;<br>&#125;<br><span class="hljs-built_in">module</span>.exports = DBUtils;<br></code></pre></td></tr></table></figure>

<h3 id="七、根据模块构建BaseService对象"><a href="#七、根据模块构建BaseService对象" class="headerlink" title="七、根据模块构建BaseService对象"></a>七、根据模块构建BaseService对象</h3><p>因为有三个数据表我们需要三个数据服务对象，但是根据我们的架构图，我们需要一个BaseService</p>
<ol>
<li>创建servcie目录</li>
<li>创建<code>BaseService.js</code>文件</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>基础的服务对象</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author </span>杨标</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>1.0</span><br><span class="hljs-comment"> */</span><br><br><br><span class="hljs-keyword">const</span> DBUtils = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;../utils/DBUtils.js&quot;</span>)<br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">BaseServcie</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">DBUtils</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">super</span>();<br>        <span class="hljs-built_in">this</span>.tableMap = &#123;<br>            <span class="hljs-attr">room_info</span>: <span class="hljs-string">&quot;room_info&quot;</span>,<br>            <span class="hljs-attr">admin_info</span>: <span class="hljs-string">&quot;admin_info&quot;</span>,<br>            <span class="hljs-attr">stu_info</span>: <span class="hljs-string">&quot;stu_info&quot;</span><br>        &#125;<br>        <span class="hljs-built_in">this</span>.currentTableName = <span class="hljs-string">&quot;&quot;</span>;<br>    &#125;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>根据一个主键id查询信息</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;number&#125;</span> </span>id 主键 </span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;object&gt;&#125;</span> </span>查询结果</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-title">findById</span>(<span class="hljs-params">id</span>)</span> &#123;<br>        <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` select * from <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> where id = ? `</span>;<br>        <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> <span class="hljs-built_in">this</span>.executeSql(strSql, [id]);<br>        <span class="hljs-keyword">return</span> results[<span class="hljs-number">0</span>];<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>根据一个主键删除信息 </span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;number&#125;</span> </span>id 主键  </span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;boolean&gt;&#125;</span> </span>true代表删除成功,false代表删除失败</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-title">deleteById</span>(<span class="hljs-params">id</span>)</span> &#123;<br>        <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` delete from <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> where id = ? `</span>;<br>        <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> <span class="hljs-built_in">this</span>.executeSql(strSql, [id]);<br>        <span class="hljs-keyword">return</span> results.affectedRows &gt; <span class="hljs-number">0</span> ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>;<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>获取所有数据</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;[]&gt;&#125;</span> </span>返回查询结果 </span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-function"><span class="hljs-title">getAllList</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` select * from <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> `</span>;<br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.executeSql(strSql);<br>    &#125;<br>&#125;<br><span class="hljs-built_in">module</span>.exports = BaseServcie;<br></code></pre></td></tr></table></figure>

<h3 id="八、构建RoomInfoService对象"><a href="#八、构建RoomInfoService对象" class="headerlink" title="八、构建RoomInfoService对象"></a>八、构建RoomInfoService对象</h3><p>根据之前的架构图，我们现在是要操作<code>room_info</code>的数据表，为前面的路由提供服务</p>
<p><strong>RoomInfoService.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>操作room_info数据表</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author </span>杨标</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@version </span>1.0</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">const</span> BaseServcie = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;./BaseService.js&quot;</span>);<br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">RoomInfoService</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">BaseServcie</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">super</span>();<br>        <span class="hljs-built_in">this</span>.currentTableName = <span class="hljs-built_in">this</span>.tableMap.room_info;<br>    &#125;<br>&#125;<br><span class="hljs-built_in">module</span>.exports = RoomInfoService;<br></code></pre></td></tr></table></figure>

<h3 id="九、创建抽象服务工厂"><a href="#九、创建抽象服务工厂" class="headerlink" title="九、创建抽象服务工厂"></a>九、创建抽象服务工厂</h3><ol>
<li>先创建一个<code>factory</code>的文件夹</li>
<li>在文件夹下面创建一个<code>ServiceFactory.js</code></li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>抽象服务工厂</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author </span>杨标</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@version </span>1.0</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;path&quot;</span>);<br><span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;fs&quot;</span>);<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@typedef <span class="hljs-variable">ServiceFactoryType</span></span></span><br><span class="hljs-comment"> * <span class="hljs-doctag">@property <span class="hljs-type">&#123;import(&quot;../service/RoomInfoService.js&quot;)&#125;</span> <span class="hljs-variable">roomInfoService</span></span></span><br><span class="hljs-comment"> */</span><br><br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@type <span class="hljs-type">&#123;ServiceFactoryType&#125;</span></span></span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">const</span> ServiceFactory = (<span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-keyword">let</span> obj = &#123;&#125;;<br>    <span class="hljs-keyword">let</span> arr = fs.readdirSync(path.join(__dirname, <span class="hljs-string">&quot;../service&quot;</span>));<br>    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> arr) &#123;<br>        <span class="hljs-keyword">let</span> properyName = item.replace(<span class="hljs-string">&quot;.js&quot;</span>, <span class="hljs-string">&quot;&quot;</span>).replace(<span class="hljs-regexp">/^[A-Z]/</span>, <span class="hljs-function"><span class="hljs-params">p</span> =&gt;</span> p.toLowerCase());<br>        <span class="hljs-keyword">let</span> temp = <span class="hljs-built_in">require</span>(path.join(__dirname, <span class="hljs-string">&quot;../service&quot;</span>, item));<br>        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> temp === <span class="hljs-string">&quot;function&quot;</span>) &#123;<br>            obj[properyName] = <span class="hljs-built_in">Reflect</span>.construct(temp, []);<br>        &#125;<br>    &#125;<br>    <span class="hljs-keyword">return</span> <span class="hljs-built_in">Object</span>.freeze(obj);<br>&#125;)();<br><span class="hljs-built_in">module</span>.exports = ServiceFactory;<br></code></pre></td></tr></table></figure>

<h3 id="十、完成room-info路由是中获取所有信息的操作"><a href="#十、完成room-info路由是中获取所有信息的操作" class="headerlink" title="十、完成room_info路由是中获取所有信息的操作"></a>十、完成room_info路由是中获取所有信息的操作</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author </span>杨标</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>roominfo的路由模块 </span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;express&quot;</span>);<br><span class="hljs-keyword">const</span> router = express.Router();<br><span class="hljs-keyword">const</span> ServiceFactory = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;../factory/ServiceFactory.js&quot;</span>);<br><br>router.get(<span class="hljs-string">&quot;/roomInfoList&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.roomInfoService.getAllList();<br>    resp.json(results);<br>&#125;);<br><br><span class="hljs-built_in">module</span>.exports = router; <br></code></pre></td></tr></table></figure>

<h3 id="十一、封装返回的JSON数据类型"><a href="#十一、封装返回的JSON数据类型" class="headerlink" title="十一、封装返回的JSON数据类型"></a>十一、封装返回的JSON数据类型</h3><p>我们现在是使用<code>express</code>来构建了一个服务器，但是有可能服务器会报相应的错误，所以我们需要处理异常情况，对于异常情况，我们也可以使用json来返回，这个时候我们返回前端的格式就要统一</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//数据请求成功</span><br>&#123;<br>    <span class="hljs-attr">status</span>:<span class="hljs-string">&quot;success&quot;</span>,<br>    <span class="hljs-attr">msg</span>:<span class="hljs-string">&quot;数据请求成功&quot;</span>,<br>    <span class="hljs-attr">data</span>:[]  <span class="hljs-comment">//这里放真正的数据</span><br>&#125;<br><br><span class="hljs-comment">//请求失败</span><br>&#123;<br>    <span class="hljs-attr">status</span>:<span class="hljs-string">&quot;fail&quot;</span>,<br>    <span class="hljs-attr">msg</span>:<span class="hljs-string">&quot;请求失败&quot;</span>,<br>    <span class="hljs-attr">data</span>:[]<br>&#125;<br></code></pre></td></tr></table></figure>

<ol>
<li>在当前项目下面创建一个<code>model</code>的文件夹</li>
<li>创建一个<code>ResultJson</code>的文件，代码如下</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>返回给客户端的json数据模型</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author </span>杨标</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@version </span>1.0</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ResultJson</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">flag, msg, data = []</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.status = flag ? <span class="hljs-string">&quot;success&quot;</span> : <span class="hljs-string">&quot;fail&quot;</span>;<br>        <span class="hljs-built_in">this</span>.msg = msg;<br>        <span class="hljs-built_in">this</span>.data = data;<br>    &#125;<br>&#125;<br><span class="hljs-built_in">module</span>.exports = ResultJson;<br></code></pre></td></tr></table></figure>

<hr>
<h3 id="十二、完成前端页面"><a href="#十二、完成前端页面" class="headerlink" title="十二、完成前端页面"></a>十二、完成前端页面</h3><p>前端页面我们使用bootstrap4，同时使用<code>art-template</code>模板引擎</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;renderer&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;webkit&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>房间信息列表<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/bootstrap/css/bootstrap.min.css&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/bootstrap/font/bootstrap-icons.css&quot;</span>&gt;</span><br>    <span class="hljs-comment">&lt;!--[if lt ie 9]&gt;</span><br><span class="hljs-comment">    &lt;script src=&quot;./css/bootstrap/html5shiv.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="hljs-comment">    &lt;script src=&quot;./css/bootstrap/respond.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="hljs-comment">    &lt;![endif]--&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/template-web.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./css/bootstrap/js/bootstrap.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>以上就是<code>bootstrap4</code>的导入项</p>
<p>当我们使用ajax去请求数据的时候，如下所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    $.get(baseURL + <span class="hljs-string">&quot;/roomInfo/roomInfoList&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(res);<br>    &#125;);<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/61789d912ab3f51d9190b94c.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211022152302382"></p>
<p>这个问题是因为AJAX不允许请求跨域的数据产生的</p>
<ul>
<li><p>当前网页的地址为<code>http://127.0.0.1:5500/roomInfoList.html</code></p>
<p>它的域是<code>http://127.0.0.1:5000</code></p>
</li>
<li><p>ajax请求的目标服务器地址为<code>http://192.168.1.254:8080/roomInfo/roomInfoList</code></p>
<p>它的域是<code>http://192.168.1.254:8080</code></p>
</li>
</ul>
<p>两个域不相同，所以ajax就会请求失败</p>
<h3 id="十三、解决Ajax跨域的问题"><a href="#十三、解决Ajax跨域的问题" class="headerlink" title="十三、解决Ajax跨域的问题"></a>十三、解决Ajax跨域的问题</h3><p>ajax跨域的问题是一个非常常见的问题，也是必须要解决的问题，它有解决方式有很多</p>
<ol>
<li>反射代理</li>
<li>服务端添加响应头实现CORS</li>
<li><code>jsonp</code></li>
</ol>
<p>本次我们即有前端，又有后端，所以我们采用第2种方式去完成</p>
<p><img src="https://pic.imgdb.cn/item/6178a91f2ab3f51d91974dfe.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211022152855534"></p>
<p>我们参考了别人的网站以后，我们发现，只要在服务器上面添加上面的这三个东西就可以解决跨域的问题</p>
<p>这个三个东西是在服务端加的</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs javascript">resp.setHeader(<span class="hljs-string">&quot;Access-Control-Allow-Headers&quot;</span>, <span class="hljs-string">&quot;Content-Type&quot;</span>);<br>resp.setHeader(<span class="hljs-string">&quot;Access-Control-Allow-Origin&quot;</span>, <span class="hljs-string">&quot;*&quot;</span>);<br>resp.setHeader(<span class="hljs-string">&quot;Access-Control-Allow-Methods&quot;</span>, <span class="hljs-string">&quot;GET,POST,PUT,DELETE,OPTIONS&quot;</span>);<br></code></pre></td></tr></table></figure>

<p>上面的三个方式设置好了以后，Ajax就可以跨域了，这种设置方式，我们叫CORS(跨域资源共享)</p>
<h3 id="十四、设置CORS的拦截器"><a href="#十四、设置CORS的拦截器" class="headerlink" title="十四、设置CORS的拦截器"></a>十四、设置CORS的拦截器</h3><p>因为所有的请求都要添加响应头，我们可以借用于express里面的拦截器来实现</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//设置一个拦截器</span><br>app.use(<span class="hljs-function">(<span class="hljs-params">req, resp, next</span>) =&gt;</span> &#123;<br>    resp.setHeader(<span class="hljs-string">&quot;Access-Control-Allow-Headers&quot;</span>, <span class="hljs-string">&quot;Content-Type&quot;</span>);<br>    resp.setHeader(<span class="hljs-string">&quot;Access-Control-Allow-Origin&quot;</span>, <span class="hljs-string">&quot;*&quot;</span>);<br>    resp.setHeader(<span class="hljs-string">&quot;Access-Control-Allow-Methods&quot;</span>, <span class="hljs-string">&quot;GET,POST,PUT,DELETE,OPTIONS&quot;</span>);<br>    next();<br>&#125;);<br><br><span class="hljs-comment">//一定是要设置在路由之前</span><br></code></pre></td></tr></table></figure>

<h3 id="十五、查询功能的完成"><a href="#十五、查询功能的完成" class="headerlink" title="十五、查询功能的完成"></a>十五、查询功能的完成</h3><p>查询的时候，我们需要先获取页面上面输入的查询参数，然后将参数发送给服务器</p>
<p>要完成这个功能，需要单独设置一个点，就是服务器如何接收前端传过来的数据</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#btn-query&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br> $.get(baseURL + <span class="hljs-string">&quot;/roomInfo/getListByPage?room_name=&quot;</span> + $(<span class="hljs-string">&quot;#room_name&quot;</span>).val(), <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(res);<br>    &#125;);<br>&#125;);<br></code></pre></td></tr></table></figure>

<p> 在上面的代码里面，我们对查询按钮绑定了一个点击的事件，当点击的时候向后台的服务器发起一个Ajax的请求，然后在这个地址的后面通过<code>search</code>的方式传递参数到服务器</p>
<p>服务器就可以通过<code>req.query</code>的方式接收到<code>get</code>请求携带过来的参数</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.get(<span class="hljs-string">&quot;/getListByPage&quot;</span>, <span class="hljs-function">(<span class="hljs-params">req, resp</span>) =&gt;</span> &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(req.query);<br>        <span class="hljs-comment">//&#123; room_name: &#x27;桃花菀&#x27; &#125;</span><br>        <span class="hljs-comment">//把值交给service,让service帮我查</span><br>        resp.send(<span class="hljs-string">&quot;我收到你的查询请求了&quot;</span>);<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>        resp.status(<span class="hljs-number">500</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, error));<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>当我们接收到这个参数以后就要交给<code>service</code>去操作数据库</p>
<p> <strong>RoomInfoService.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>操作room_info数据表</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author </span>杨标</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@version </span>1.0</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-keyword">const</span> BaseServcie = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;./BaseService.js&quot;</span>);<br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">RoomInfoService</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">BaseServcie</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">super</span>();<br>        <span class="hljs-built_in">this</span>.currentTableName = <span class="hljs-built_in">this</span>.tableMap.room_info;<br>    &#125;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 分页查询</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;&#123;room_name&#125;</span></span>&#125; param 查询参数</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;[]&gt;&#125;</span> </span>返回查询结果</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-function"><span class="hljs-title">getListByPage</span>(<span class="hljs-params">&#123; room_name &#125;</span>)</span> &#123;<br>        <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` select * from <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> where 1 `</span>;<br>        <span class="hljs-keyword">let</span> ps = []<br>        <span class="hljs-keyword">if</span> (room_name) &#123;<br>            strSql += <span class="hljs-string">` and room_name like ? `</span>;<br>            ps.push(<span class="hljs-string">`%<span class="hljs-subst">$&#123;room_name&#125;</span>%`</span>);<br>        &#125;<br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.executeSql(strSql, ps);<br>    &#125;<br>&#125;<br><span class="hljs-built_in">module</span>.exports = RoomInfoService;<br></code></pre></td></tr></table></figure>

<p>当我们的Service已经完成了以后，我们又可以回到路由 去使用这个Service获取数据</p>
<p><strong>roomInfoService.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.get(<span class="hljs-string">&quot;/getListByPage&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(req.query);<br>        <span class="hljs-comment">//&#123; room_name: &#x27;桃花菀&#x27;&#125;</span><br>        <span class="hljs-comment">//把值交给service,让service帮我查</span><br>        <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.roomInfoService.getListByPage(req.query);<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">true</span>, <span class="hljs-string">&quot;获取数据成功&quot;</span>, results));<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>        resp.status(<span class="hljs-number">500</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, error));<br>    <br></code></pre></td></tr></table></figure>

<p>前端的页面经过ajax请求以后就可以得到数据，得到数据以后，重新渲染页面</p>
<p>【前端页面】</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//查询</span><br>$(<span class="hljs-string">&quot;#btn-query&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>  Qmsg.loading(<span class="hljs-string">&quot;正在请求数据...&quot;</span>);<br>  $.get(baseURL + <span class="hljs-string">&quot;/roomInfo/getListByPage?room_name=&quot;</span> + $(<span class="hljs-string">&quot;#room_name&quot;</span>).val(), <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;<br>        Qmsg.closeAll();<br>        <span class="hljs-keyword">if</span> (res.status == <span class="hljs-string">&quot;success&quot;</span>) &#123;<br>            <span class="hljs-comment">//数据请求成功</span><br>            Qmsg.success(<span class="hljs-string">&quot;请求数据成功&quot;</span>);<br>            <span class="hljs-keyword">let</span> htmlStr = template(<span class="hljs-string">&quot;temp1&quot;</span>, &#123;<br>                <span class="hljs-attr">roomInfoList</span>: res.data<br>            &#125;);<br>            $(<span class="hljs-string">&quot;#table-roomInfo&gt;tbody&quot;</span>).html(htmlStr);<br><br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            <span class="hljs-comment">//数据请求失败</span><br>            Qmsg.error(<span class="hljs-string">&quot;请求数据失败&quot;</span>);<br>        &#125;<br>    &#125;);<br>&#125;);<br></code></pre></td></tr></table></figure>

<h3 id="十六、ajax请求的封装"><a href="#十六、ajax请求的封装" class="headerlink" title="十六、ajax请求的封装"></a>十六、ajax请求的封装</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 网页里面的JS不要瞎写,有兼容性的</span><br><span class="hljs-comment"> * 不像nodejs,所以最好是有ES5为主</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-keyword">var</span> baseURL = <span class="hljs-string">&quot;http://127.0.0.1:8080&quot;</span>;<br><br><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 将原来jQuery里面的ajax封装成一个Promise的处理方式</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">var</span> request = &#123;<br>    <span class="hljs-attr">get</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">url, data</span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">resolve, reject</span>) </span>&#123;<br>            $.ajax(&#123;<br>                <span class="hljs-attr">url</span>: baseURL + url,<br>                <span class="hljs-attr">method</span>: <span class="hljs-string">&quot;get&quot;</span>,<br>                <span class="hljs-attr">data</span>: data,<br>                <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">res</span>) </span>&#123;<br>                    resolve(res);<br>                &#125;,<br>                <span class="hljs-attr">error</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>&#123;<br>                    reject(error);<br>                &#125;<br>            &#125;);<br>        &#125;);<br>    &#125;,<br>    <span class="hljs-attr">post</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">url, data</span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">resolve, reject</span>) </span>&#123;<br>            $.ajax(&#123;<br>                <span class="hljs-attr">url</span>: baseURL + url,<br>                <span class="hljs-attr">method</span>: <span class="hljs-string">&quot;post&quot;</span>,<br>                <span class="hljs-attr">data</span>: data,<br>                <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">res</span>) </span>&#123;<br>                    resolve(res);<br>                &#125;,<br>                <span class="hljs-attr">error</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>&#123;<br>                    reject(error);<br>                &#125;<br>            &#125;);<br>        &#125;);<br>    &#125;<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="十七、构建分页"><a href="#十七、构建分页" class="headerlink" title="十七、构建分页"></a>十七、构建分页</h3><p><img src="https://pic.imgdb.cn/item/6177faae2ab3f51d9118852a.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211025105238671"></p>
<p>我们现在如果希望构建上面的分页信息展示，怎么办呢？</p>
<p>我们现在已经知道分页的多条SQL语句执行的结果如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> results = [<br>  [<br>    RowDataPacket &#123;<br>      <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<br>      <span class="hljs-attr">room_name</span>: <span class="hljs-string">&#x27;西-s-0751&#x27;</span>,<br>      <span class="hljs-attr">max_count</span>: <span class="hljs-number">2</span>,<br>      <span class="hljs-attr">kt</span>: <span class="hljs-number">1</span>,<br>      <span class="hljs-attr">network</span>: <span class="hljs-number">1</span>,<br>      <span class="hljs-attr">washroom</span>: <span class="hljs-number">0</span>,<br>      <span class="hljs-attr">room_size</span>: <span class="hljs-number">191.25</span><br>    &#125;,<br>    <span class="hljs-comment">//.........</span><br>  ],<br>  [ <br>      RowDataPacket &#123; <br>      	<span class="hljs-attr">total_count</span>: <span class="hljs-number">56</span> <br>      &#125; <br>  ]<br>]<br></code></pre></td></tr></table></figure>

<p>在上面的结果 里面，第一个数组代表的就是第一条SQL语句查询的结果，我们可以通过<code>results[0]</code>得到列表的结果，第二条SQL语句可以通过<code>results[1]</code>得到结果，所以我们可以通过<code>results[1][0].total_count</code>得到结果</p>
<p>页整个页面需要构建的数据如正是</p>
<ul>
<li>当前第几页<code>pageIndex</code></li>
<li>共多少页<code>pageCount</code></li>
<li>共多少条<code>totalCount</code></li>
</ul>
<p>我们在<code>model</code>的文件夹下面创建了一个<code>PageList</code>的对象，如下所示</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PageList</span> </span>&#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * </span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;number&#125;</span> </span>pageIndex 当前第几页</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;number&#125;</span> </span>totalCount 共多少条数据</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;number&#125;</span> </span>pageSize  每页显示多少</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;[]&#125;</span> </span>listData 查询的分页列表数据 </span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">pageIndex, totalCount, pageSize, listData</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.pageIndex = pageIndex;<br>        <span class="hljs-built_in">this</span>.totalCount = totalCount;<br>        <span class="hljs-built_in">this</span>.pageCount = <span class="hljs-built_in">Math</span>.ceil(totalCount / pageSize);<br>        <span class="hljs-built_in">this</span>.listData = listData;<br>    &#125;<br>&#125;<br><span class="hljs-built_in">module</span>.exports = PageList;<br></code></pre></td></tr></table></figure>

<p>最后在<code>getListByPage</code>里面完成如下代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * 分页查询</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;&#123;room_name,pageIndex&#125;</span></span>&#125; param 查询参数</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;PageList&gt;&#125;</span> </span>返回分页查询以后的封装的PageList</span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-title">getListByPage</span>(<span class="hljs-params">&#123; room_name, pageIndex &#125;</span>)</span> &#123;<br>    <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` select * from <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> where 1 `</span>;<br>    <span class="hljs-keyword">let</span> countSql = <span class="hljs-string">` select count(*) &#x27;total_count&#x27; from <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> where 1 `</span>;<br>    <span class="hljs-keyword">let</span> strWhere = <span class="hljs-string">` `</span>;<br>    <span class="hljs-keyword">let</span> ps = []<br>    <span class="hljs-keyword">if</span> (room_name) &#123;<br>        strWhere += <span class="hljs-string">` and room_name like ? `</span>;<br>        ps.push(<span class="hljs-string">`%<span class="hljs-subst">$&#123;room_name&#125;</span>%`</span>);<br>    &#125;<br>    strSql += <span class="hljs-string">` <span class="hljs-subst">$&#123;strWhere&#125;</span> limit <span class="hljs-subst">$&#123;(pageIndex - <span class="hljs-number">1</span>) * <span class="hljs-built_in">this</span>.pageSize&#125;</span> , <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.pageSize&#125;</span> `</span>;<br>    countSql += strWhere;<br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> <span class="hljs-built_in">this</span>.executeSql(strSql + <span class="hljs-string">&quot;;&quot;</span> + countSql, [...ps, ...ps]);<br>    <span class="hljs-keyword">let</span> pageList = <span class="hljs-keyword">new</span> PageList(pageIndex, results[<span class="hljs-number">1</span>][<span class="hljs-number">0</span>].total_count, <span class="hljs-built_in">this</span>.pageSize, results[<span class="hljs-number">0</span>]);<br>    <span class="hljs-keyword">return</span> pageList;<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>roomInfoRoute.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.get(<span class="hljs-string">&quot;/getListByPage&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>        <span class="hljs-comment">//&#123; room_name: &#x27;&#x27;, pageIndex: &#x27;1&#x27; &#125;</span><br>        <span class="hljs-keyword">let</span> pageList = <span class="hljs-keyword">await</span> ServiceFactory.roomInfoService.getListByPage(req.query);<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">true</span>, <span class="hljs-string">&quot;获取数据成功&quot;</span>, pageList));<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>        <span class="hljs-built_in">console</span>.log(error);<br>        resp.status(<span class="hljs-number">500</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, error));<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>roomInfoList.html文件</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;renderer&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;webkit&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>房间信息列表<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/bootstrap/css/bootstrap.min.css&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/bootstrap/font/bootstrap-icons.css&quot;</span>&gt;</span><br>    <span class="hljs-comment">&lt;!--[if lt ie 9]&gt;</span><br><span class="hljs-comment">    &lt;script src=&quot;./css/bootstrap/html5shiv.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="hljs-comment">    &lt;script src=&quot;./css/bootstrap/respond.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="hljs-comment">    &lt;![endif]--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/message.css&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container-fluid&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;breadcrumb&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;breadcrumb-item&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;breadcrumb-item active&quot;</span>&gt;</span>房间信息列表<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-inline&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;control-label&quot;</span>&gt;</span>房间编号<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;room_name&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-control&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;输入房间编号查询&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group ml-2&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn-query&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn btn-success&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bi-search&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>                    查询<br>                <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group ml-2&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn btn-info&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bi-plus-circle&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>                    新增房间<br>                <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group ml-2&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn btn-dark&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bi-file-earmark-excel&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>                    导出为excel<br>                <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- 表格 --&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;table-responsive mt-1&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;table-roomInfo&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;table table-hover table-striped table-bordered&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">thead</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bg-info text-light&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span>&gt;</span>全选<br>                        <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>房间编号<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>最大人数<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;text-center&quot;</span>&gt;</span>是否有空调<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;text-center&quot;</span>&gt;</span>是否有网络<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;text-center&quot;</span>&gt;</span>独立卫生间<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>房间面积 (m<span class="hljs-tag">&lt;<span class="hljs-name">sup</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">sup</span>&gt;</span>)<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>操作<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">thead</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">tbody</span>&gt;</span><br><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">tbody</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;row&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;page-list-info&quot;</span>&gt;</span><br><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;pagination justify-content-end&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/html&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><span class="handlebars"><span class="xml"></span></span><br><span class="xml"><span class="handlebars">    </span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name"><span class="hljs-builtin-name">each</span></span> roomInfoList item index&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">    <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.room_name</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.max_count</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;text-center&quot;</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;p-1 text-light rounded </span></span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.kt</span>==<span class="hljs-number">0</span>?<span class="hljs-string">&#x27;bg-danger&#x27;</span>:<span class="hljs-string">&#x27;bg-success&#x27;</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">                </span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.kt</span>==<span class="hljs-number">0</span>?<span class="hljs-string">&quot;无&quot;</span>:<span class="hljs-string">&quot;有&quot;</span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;text-center&quot;</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;p-1 text-light rounded </span></span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.network</span>==<span class="hljs-number">0</span>?<span class="hljs-string">&#x27;bg-danger&#x27;</span>:<span class="hljs-string">&#x27;bg-success&#x27;</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">                </span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.network</span>==<span class="hljs-number">0</span>?<span class="hljs-string">&quot;无&quot;</span>:<span class="hljs-string">&quot;有&quot;</span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;text-center&quot;</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;p-1 text-light rounded </span></span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.washroom</span>==<span class="hljs-number">0</span>?<span class="hljs-string">&#x27;bg-danger&#x27;</span>:<span class="hljs-string">&#x27;bg-success&#x27;</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">                </span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.washroom</span>==<span class="hljs-number">0</span>?<span class="hljs-string">&quot;无&quot;</span>:<span class="hljs-string">&quot;有&quot;</span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.room_size</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn btn-warning btn-sm&quot;</span>&gt;</span>编辑<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn btn-danger btn-sm&quot;</span>&gt;</span>删除<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">    <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">    </span><span class="hljs-template-tag">&#123;&#123;/<span class="hljs-name"><span class="hljs-builtin-name">each</span></span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">    </span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>    <span class="hljs-comment">&lt;!-- 渲染分页的页码 --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/html&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp2&quot;</span>&gt;</span><span class="handlebars"><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-index</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-item&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-link&quot;</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        &lt;%for(var i=1;i&lt;=pageCount;i++)&#123;%&gt;</span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-index</span>=<span class="hljs-string">&quot;</span></span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">i</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-item </span></span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">i</span>==pageIndex?<span class="hljs-string">&#x27;active&#x27;</span>:<span class="hljs-literal">null</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">i</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        &lt;%&#125;%&gt;</span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-index</span>=<span class="hljs-string">&quot;</span></span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">pageCount</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-item&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-link&quot;</span>&gt;</span>尾页<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">    </span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/html&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp3&quot;</span>&gt;</span><span class="handlebars"><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        当前第</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">pageIndex</span>&#125;&#125;</span><span class="xml">页，共</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">pageCount</span>&#125;&#125;</span><span class="xml">页，共</span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">totalCount</span>&#125;&#125;</span><span class="xml">条</span></span><br><span class="xml"><span class="handlebars">    </span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/template-web.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./css/bootstrap/js/bootstrap.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/base.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/message.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    $(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getData</span>(<span class="hljs-params">pageIndex</span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">var</span> loading = Qmsg.loading(<span class="hljs-string">&quot;正在加载数据...&quot;</span>);</span><br><span class="javascript">            request.get(<span class="hljs-string">&quot;/roomInfo/getListByPage&quot;</span>, &#123;</span><br><span class="javascript">                <span class="hljs-attr">room_name</span>: $(<span class="hljs-string">&quot;#room_name&quot;</span>).val(),</span><br><span class="javascript">                <span class="hljs-attr">pageIndex</span>: pageIndex</span><br><span class="javascript">            &#125;).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(res);</span><br><span class="javascript"></span><br><span class="javascript">                <span class="hljs-keyword">if</span> (res.status == <span class="hljs-string">&quot;success&quot;</span>) &#123;</span><br><span class="javascript">                    Qmsg.success(<span class="hljs-string">&quot;获取数据成功&quot;</span>);</span><br><span class="javascript">                    <span class="hljs-comment">//渲染表格</span></span><br><span class="javascript">                    <span class="hljs-keyword">var</span> htmlStr = template(<span class="hljs-string">&quot;temp1&quot;</span>, &#123;</span><br><span class="javascript">                        <span class="hljs-attr">roomInfoList</span>: res.data.listData</span><br><span class="javascript">                    &#125;);</span><br><span class="javascript">                    $(<span class="hljs-string">&quot;#table-roomInfo&gt;tbody&quot;</span>).html(htmlStr);</span><br><span class="javascript">                    <span class="hljs-comment">// 渲染页面</span></span><br><span class="javascript">                    <span class="hljs-keyword">var</span> htmlStr2 = template(<span class="hljs-string">&quot;temp2&quot;</span>, &#123;</span><br><span class="javascript">                        <span class="hljs-attr">pageCount</span>: res.data.pageCount,</span><br><span class="javascript">                        <span class="hljs-attr">pageIndex</span>: res.data.pageIndex</span><br><span class="javascript">                    &#125;);</span><br><span class="javascript">                    $(<span class="hljs-string">&quot;.pagination&quot;</span>).html(htmlStr2);</span><br><span class="javascript">                    <span class="hljs-comment">//渲染左边的文字信息</span></span><br><span class="javascript">                    <span class="hljs-keyword">var</span> htmlStr3 = template(<span class="hljs-string">&quot;temp3&quot;</span>, &#123;</span><br><span class="javascript">                        <span class="hljs-attr">pageIndex</span>: res.data.pageIndex,</span><br><span class="javascript">                        <span class="hljs-attr">pageCount</span>: res.data.pageCount,</span><br><span class="javascript">                        <span class="hljs-attr">totalCount</span>: res.data.totalCount</span><br><span class="javascript">                    &#125;);</span><br><span class="javascript">                    $(<span class="hljs-string">&quot;#page-list-info&quot;</span>).html(htmlStr3);</span><br><span class="javascript">                &#125; <span class="hljs-keyword">else</span> &#123;</span><br><span class="javascript">                    Qmsg.error(<span class="hljs-string">&quot;获取数据失败&quot;</span>);</span><br><span class="javascript">                &#125;</span><br><span class="javascript">            &#125;).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>&#123;</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(error);</span><br><span class="javascript">                Qmsg.error(<span class="hljs-string">&quot;服务器错误，请联系管理员&quot;</span>);</span><br><span class="javascript">            &#125;).finally(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">                <span class="hljs-comment">//无论是成功进入then还是失败进入catch,最后都会进入到finally</span></span><br><span class="javascript">                loading.close();</span><br><span class="javascript">            &#125;);</span><br><span class="javascript">        &#125;</span><br><span class="javascript">        getData(<span class="hljs-number">1</span>);</span><br><span class="javascript">        $(<span class="hljs-string">&quot;#btn-query&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">            getData(<span class="hljs-number">1</span>);</span><br><span class="javascript">        &#125;)</span><br><span class="javascript"></span><br><span class="javascript">        $(<span class="hljs-string">&quot;.pagination&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-string">&quot;li&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">var</span> index = $(<span class="hljs-built_in">this</span>).attr(<span class="hljs-string">&quot;data-index&quot;</span>);</span><br><span class="javascript">            getData(index);</span><br><span class="javascript">        &#125;);</span><br><span class="javascript"></span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="十八、配置服务器POST请求"><a href="#十八、配置服务器POST请求" class="headerlink" title="十八、配置服务器POST请求"></a>十八、配置服务器POST请求</h3><p><strong>第一步：装包</strong></p>
<p>post请求是需要第三方包来完成的</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install body-parser --save<br></code></pre></td></tr></table></figure>

<p>**第二步：在app.js中配置post请求接收值的方式 **</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//配置post接收参数</span><br><span class="hljs-keyword">const</span> bodyParser = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;body-parser&quot;</span>);<br>app.use(bodyParser.urlencoded(&#123; <span class="hljs-attr">extended</span>: <span class="hljs-literal">false</span> &#125;));<br>app.use(bodyParser.json(&#123; <span class="hljs-attr">limit</span>: <span class="hljs-string">&quot;30mb&quot;</span> &#125;));<br></code></pre></td></tr></table></figure>

<p><strong>第三步：接收值使用req.body</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.post(<span class="hljs-string">&quot;/add&quot;</span>,<span class="hljs-keyword">async</span>(req,resp)=&gt;&#123;<br>    <span class="hljs-comment">//接收值</span><br>   	<span class="hljs-built_in">console</span>.log(req.body); <br>&#125;);<br></code></pre></td></tr></table></figure>

<h3 id="十九、新增房间的功能【POST请求】"><a href="#十九、新增房间的功能【POST请求】" class="headerlink" title="十九、新增房间的功能【POST请求】"></a>十九、新增房间的功能【POST请求】</h3><p>按照我们相应的开发规范，如果有一个新的模块出来的时候应该是先后台，再前台</p>
<p>首先在后台的项目里，完成<code>Service</code>的功能</p>
<p><strong>RoomInfoService.js文件里面</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment">* <span class="hljs-doctag">@description </span>新增房间数据</span><br><span class="hljs-comment">* <span class="hljs-doctag">@param <span class="hljs-type">&#123;&#123; room_name, max_count, kt, network, washroom, room_size &#125;</span></span>&#125; param 新增的删除</span><br><span class="hljs-comment">* <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;boolean&gt;&#125;</span> </span>true代表新增成功,false代表新增失败</span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-title">add</span>(<span class="hljs-params">&#123; room_name, max_count, kt, network, washroom, room_size &#125;</span>)</span> &#123;<br>    <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` INSERT INTO <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> (room_name, max_count, kt, network, washroom, room_size) VALUES (?, ?, ?, ?, ?, ?); `</span>;<br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> <span class="hljs-built_in">this</span>.executeSql(strSql, [room_name, max_count, kt, network, washroom, room_size]);<br>    <span class="hljs-keyword">return</span> results.affectedRows &gt; <span class="hljs-number">0</span> ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>roomInfoRoute.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.post(<span class="hljs-string">&quot;/add&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>        <span class="hljs-comment">//请注意，因为是post主有求，所以要使用body来接收值</span><br>        <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.roomInfoService.add(req.body);<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(results, results ? <span class="hljs-string">&quot;新增成功&quot;</span> : <span class="hljs-string">&quot;新增失败&quot;</span>));<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>        <span class="hljs-built_in">console</span>.log(error);<br>        resp.status(<span class="hljs-number">500</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, error));<br>    &#125;<br>&#125;);<br><br></code></pre></td></tr></table></figure>

<blockquote>
<p>这里一定要注意，post请求传递过来的值，是通过<code>req.body</code>来接收的</p>
</blockquote>
<p><strong>前端代码addRoomInfo.html</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;renderer&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;webkit&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>新增房间信息<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/bootstrap/css/bootstrap.min.css&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/bootstrap/font/bootstrap-icons.css&quot;</span>&gt;</span><br>    <span class="hljs-comment">&lt;!--[if lt ie 9]&gt;</span><br><span class="hljs-comment">    &lt;script src=&quot;./css/bootstrap/html5shiv.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="hljs-comment">    &lt;script src=&quot;./css/bootstrap/respond.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="hljs-comment">    &lt;![endif]--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/message.css&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container-fluid&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;breadcrumb&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;breadcrumb-item&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;breadcrumb-item active&quot;</span>&gt;</span>新增房间信息<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;card&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;card-header bg-info text-light&quot;</span>&gt;</span><br>                新增房间信息<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;card-body&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;form-addRoomInfo&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group row&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-form-label col-sm-2 text-right&quot;</span>&gt;</span>房间编号<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-7&quot;</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;room_name&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;room_name&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入房间编号&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-control&quot;</span></span><br><span class="hljs-tag">                                <span class="hljs-attr">data-rule-required</span>=<span class="hljs-string">&quot;true&quot;</span></span><br><span class="hljs-tag">                                <span class="hljs-attr">data-msg-required</span>=<span class="hljs-string">&quot;房间编号不能为空&quot;</span></span><br><span class="hljs-tag">                                <span class="hljs-attr">data-rule-regexp</span>=<span class="hljs-string">&quot;^[东南西北中发白]\-[sbt]\-\d&#123;4&#125;$&quot;</span></span><br><span class="hljs-tag">                                <span class="hljs-attr">data-msg-regexp</span>=<span class="hljs-string">&quot;房间编号的格式不正确&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-3 text-danger&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group row&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-form-label col-sm-2 text-right&quot;</span>&gt;</span>最大人数<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-7&quot;</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;max_count&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;max_count&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入最大人数&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-control&quot;</span></span><br><span class="hljs-tag">                                <span class="hljs-attr">data-rule-required</span>=<span class="hljs-string">&quot;true&quot;</span></span><br><span class="hljs-tag">                                <span class="hljs-attr">data-msg-required</span>=<span class="hljs-string">&quot;最大人数不能为空&quot;</span></span><br><span class="hljs-tag">                                <span class="hljs-attr">data-rule-regexp</span>=<span class="hljs-string">&quot;^\d+$&quot;</span></span><br><span class="hljs-tag">                                <span class="hljs-attr">data-msg-regexp</span>=<span class="hljs-string">&quot;最大人数必须是整数&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-3 text-danger&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group row align-items-center&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-form-label col-sm-2 text-right&quot;</span>&gt;</span>是否有空调<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-7&quot;</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-radio custom-control custom-control-inline&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-control-input&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;kt1&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;kt&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;kt1&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-control-label&quot;</span>&gt;</span>有<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-radio custom-control custom-control-inline&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-control-input&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;kt0&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;kt&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;0&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;kt0&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-control-label&quot;</span>&gt;</span>没有<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group row align-items-center&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-form-label col-sm-2 text-right&quot;</span>&gt;</span>是否有网络<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-7&quot;</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-radio custom-control custom-control-inline&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-control-input&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;network1&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;network&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;network1&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-control-label&quot;</span>&gt;</span>有<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-radio custom-control custom-control-inline&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-control-input&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;network0&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;network&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;0&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;network0&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-control-label&quot;</span>&gt;</span>没有<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group row align-items-center&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-form-label col-sm-2 text-right&quot;</span>&gt;</span>是否有独卫<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-7&quot;</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-radio custom-control custom-control-inline&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-control-input&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;washroom1&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;washroom&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;washroom1&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-control-label&quot;</span>&gt;</span>有<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-radio custom-control custom-control-inline&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-control-input&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;washroom0&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;washroom&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;0&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;washroom0&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-control-label&quot;</span>&gt;</span>没有<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-3 text-danger&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group row&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-form-label col-sm-2 text-right&quot;</span>&gt;</span>房间大小<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-7&quot;</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;input-group&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;room_size&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;room_size&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-control&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入房间面积&quot;</span></span><br><span class="hljs-tag">                                    <span class="hljs-attr">data-rule-required</span>=<span class="hljs-string">&quot;true&quot;</span></span><br><span class="hljs-tag">                                    <span class="hljs-attr">data-msg-required</span>=<span class="hljs-string">&quot;房间面积不能为空&quot;</span></span><br><span class="hljs-tag">                                    <span class="hljs-attr">data-rule-regexp</span>=<span class="hljs-string">&quot;^\d+(\.\d+)?$&quot;</span></span><br><span class="hljs-tag">                                    <span class="hljs-attr">data-msg-regexp</span>=<span class="hljs-string">&quot;房间面积必须是数字类型&quot;</span>&gt;</span><br>                                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;input-group-append&quot;</span>&gt;</span><br>                                    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;input-group-text&quot;</span>&gt;</span>m<span class="hljs-tag">&lt;<span class="hljs-name">sup</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">sup</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>                                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-3 text-danger&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group row&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-7 offset-sm-2&quot;</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn-save&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn btn-success&quot;</span>&gt;</span><br>                                保存数据<br>                            <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>                            <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./roomInfoList.html&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn btn-info&quot;</span>&gt;</span><br>                                返回列表<br>                            <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/template-web.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./css/bootstrap/js/bootstrap.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/message.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery.validate.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/messages_zh.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/base.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    $(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> validateForm = $(<span class="hljs-string">&quot;#form-addRoomInfo&quot;</span>).validate(&#123;</span><br><span class="javascript">            <span class="hljs-attr">errorClass</span>: <span class="hljs-string">&quot;text-danger&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">errorPlacement</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">errorElement, currentElement</span>) </span>&#123;</span><br><span class="javascript">                <span class="hljs-comment">// currentElement.parent().next().append(errorElement);</span></span><br><span class="javascript">                currentElement.parentsUntil(<span class="hljs-string">&quot;form&quot;</span>).find(<span class="hljs-string">&quot;div.text-danger&quot;</span>).append(errorElement);</span><br><span class="javascript">            &#125;,</span><br><span class="javascript">        &#125;);</span><br><span class="javascript"></span><br><span class="javascript">        $(<span class="hljs-string">&quot;#btn-save&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">if</span> (validateForm.form()) &#123;</span><br><span class="javascript">                <span class="hljs-comment">//验证通过以后就要提交数据了     </span></span><br><span class="javascript">                addData();</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;);</span><br><span class="javascript"></span><br><span class="javascript"></span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addData</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">var</span> laoding = Qmsg.loading(<span class="hljs-string">&quot;正在保存数据.....&quot;</span>)</span><br><span class="javascript">            request.post(<span class="hljs-string">&quot;/roomInfo/add&quot;</span>, &#123;</span><br><span class="javascript">                <span class="hljs-attr">room_name</span>: $(<span class="hljs-string">&quot;#room_name&quot;</span>).val(),</span><br><span class="javascript">                <span class="hljs-attr">max_count</span>: $(<span class="hljs-string">&quot;#max_count&quot;</span>).val(),</span><br><span class="javascript">                <span class="hljs-attr">kt</span>: $(<span class="hljs-string">&quot;[name=&#x27;kt&#x27;]:checked&quot;</span>).val(),</span><br><span class="javascript">                <span class="hljs-attr">network</span>: $(<span class="hljs-string">&quot;[name=&#x27;network&#x27;]:checked&quot;</span>).val(),</span><br><span class="javascript">                <span class="hljs-attr">washroom</span>: $(<span class="hljs-string">&quot;[name=&#x27;washroom&#x27;]:checked&quot;</span>).val(),</span><br><span class="javascript">                <span class="hljs-attr">room_size</span>: $(<span class="hljs-string">&quot;#room_size&quot;</span>).val()</span><br><span class="javascript">            &#125;).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;</span><br><span class="javascript">                <span class="hljs-keyword">if</span> (res.status == <span class="hljs-string">&quot;success&quot;</span>) &#123;</span><br><span class="javascript">                    Qmsg.success(<span class="hljs-string">&quot;新增成功&quot;</span>);</span><br><span class="javascript">                    location.replace(<span class="hljs-string">&quot;./roomInfoList.html&quot;</span>);</span><br><span class="javascript">                &#125; <span class="hljs-keyword">else</span> &#123;</span><br><span class="javascript">                    Qmsg.error(<span class="hljs-string">&quot;新增失败，请重试或联系管理员&quot;</span>);</span><br><span class="javascript">                &#125;</span><br><span class="javascript">            &#125;).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>&#123;</span><br><span class="javascript">                <span class="hljs-built_in">console</span>.log(error);</span><br><span class="javascript">                Qmsg.error(<span class="hljs-string">&quot;服务器错误&quot;</span>);</span><br><span class="javascript">            &#125;).finally(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">                laoding.close();</span><br><span class="javascript">            &#125;)</span><br><span class="javascript">        &#125;</span><br><span class="javascript"></span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="二十、新增验证房间编号是否存在"><a href="#二十、新增验证房间编号是否存在" class="headerlink" title="二十、新增验证房间编号是否存在"></a>二十、新增验证房间编号是否存在</h3><p><img src="https://pic.imgdb.cn/item/6178aa522ab3f51d919804f6.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211025145202624"></p>
<p>当我们在新增数据的时候，我们不仅仅是要新增数据，还要在填写数据的时候告诉别人，这个数据是否已经存在了</p>
<p><strong>RoomInfoService.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>验证某一个房间编号是否存在</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;string&#125;</span> </span>room_name 要验证的房间编号</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;boolean&gt;&#125;</span> </span>true代表存在，false代表不存在</span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-title">existsRoomName</span>(<span class="hljs-params">room_name</span>)</span> &#123;<br>    <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` select * from <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> where 1  and room_name = ? `</span>;<br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> <span class="hljs-built_in">this</span>.executeSql(strSql, [room_name]);<br>    <span class="hljs-keyword">return</span> results.length &gt; <span class="hljs-number">0</span> ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>在路由文件roomInfoRoute.js里面编写一个路径请求，接收页面传递过来的房间编号 ，判断这个房间编号是否存在</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.get(<span class="hljs-string">&quot;/existsRoomName&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>        <span class="hljs-built_in">console</span>.log(req.query.room_name);<br>        <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.roomInfoService.existsRoomName(req.query.room_name);<br>        resp.send(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">true</span>, <span class="hljs-string">&quot;数据请求成功&quot;</span>, results));<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>        <span class="hljs-built_in">console</span>.log(error);<br>        resp.status(<span class="hljs-number">500</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, error));<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>在上面的路由里面添加了这个请求的路由以后，我们在前端的页面上面就可以使用这个路由地址的路径去通过AJAX请求了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#room_name&quot;</span>).on(<span class="hljs-string">&quot;blur&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> room_name = $(<span class="hljs-built_in">this</span>).val();<br>    <span class="hljs-keyword">if</span> (room_name) &#123;<br>        request.get(<span class="hljs-string">&quot;/roomInfo/existsRoomName&quot;</span>, &#123;<br>            <span class="hljs-attr">room_name</span>: room_name<br>        &#125;).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;<br>            <span class="hljs-keyword">if</span> (res.status == <span class="hljs-string">&quot;success&quot;</span>) &#123;<br>                <span class="hljs-keyword">if</span> (res.data == <span class="hljs-literal">true</span>) &#123;<br>                    Qmsg.warning(<span class="hljs-string">&quot;当前房间编号已存在，请换一个&quot;</span>);<br>                    $(<span class="hljs-string">&quot;#room_name&quot;</span>).val(<span class="hljs-string">&quot;&quot;</span>);<br>                &#125;<br>            &#125;<br>        &#125;).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>&#123;<br>            Qmsg.error(<span class="hljs-string">&quot;服务器错误&quot;</span>);<br>            <span class="hljs-built_in">console</span>.log(error);<br>        &#125;);<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<h3 id="二十一、设置项目的自动重启"><a href="#二十一、设置项目的自动重启" class="headerlink" title="二十一、设置项目的自动重启"></a>二十一、设置项目的自动重启</h3><p>在进行nodejs项目开发的时候，当我们更改了项目的源代码，我们希望项目能够自动重新启动，这个技术叫项目的热重启技术，它需要借用于第三方包来完成<code>nodemon</code></p>
<p><strong>第一步：安装nodemon</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install nodemon --save-dev<br></code></pre></td></tr></table></figure>

<blockquote>
<p>这里要注意，这里使用的是<code>--save-dev</code></p>
<ul>
<li><code>--save</code>代表当前的包是一个生产环境下面的包</li>
<li><code>--save-dev</code>代表当前的包是一个开发环境下面的包</li>
</ul>
</blockquote>
<p><strong>场景：</strong>现在李光昊要做一碗饭给标哥吃，它需要如下的东西</p>
<ol>
<li>米【原材料】</li>
<li>水【原材料】</li>
<li>电饭锅【工具】</li>
</ol>
<p>工具一般是在开发环境的时候使用的，而原材料则是生产环境下面使用</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install 米 水 --save<br>$ npm install 电锯锅 --save-dev<br></code></pre></td></tr></table></figure>

<p><strong>第二步：配置启动脚本</strong></p>
<p>在<code>package.json</code>的文件下面，找到<code>scripts</code>，添加如下命令</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-string">&quot;scripts&quot;</span>: &#123;<br>    <span class="hljs-string">&quot;start&quot;</span>: <span class="hljs-string">&quot;node app.js&quot;</span>,<br>    <span class="hljs-string">&quot;dev&quot;</span>: <span class="hljs-string">&quot;nodemon --watch ./&quot;</span><br>&#125;,<br></code></pre></td></tr></table></figure>

<p><strong>第三步：启动项目</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm run dev<br></code></pre></td></tr></table></figure>

<hr>
<h3 id="二十二、编辑房间信息"><a href="#二十二、编辑房间信息" class="headerlink" title="二十二、编辑房间信息"></a>二十二、编辑房间信息</h3><p><img src="https://pic.imgdb.cn/item/6178aa7e2ab3f51d919823d2.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211025184436804"></p>
<p>上图就是编辑页面的布局，但是我们应该是在列表页面点击编辑按钮以后再跳这个页面</p>
<p><img src="https://pic.imgdb.cn/item/6178acd72ab3f51d91999869.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211025185710524"></p>
<p><strong>roomInfoRoute.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.get(<span class="hljs-string">&quot;/findById&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>        <span class="hljs-keyword">let</span> &#123; id &#125; = req.query;<br>        <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.roomInfoService.findById(id);<br>        <span class="hljs-keyword">let</span> flag = results ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>;<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(flag, flag ? <span class="hljs-string">&quot;获取数据成功&quot;</span> : <span class="hljs-string">&quot;获取数据失败&quot;</span>, results));<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>        <span class="hljs-built_in">console</span>.log(error);<br>        resp.status(<span class="hljs-number">500</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, error));<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>editRoomInfo.html</strong></p>
<blockquote>
<p>这个时候浏览器地址栏的值为：<a target="_blank" rel="noopener" href="http://127.0.0.1:5500/editRoomInfo.html?id=6">http://127.0.0.1:5500/editRoomInfo.html?id=6</a></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getById</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-comment">//合到浏览器地址栏上面的id</span><br>    <span class="hljs-keyword">var</span> u = <span class="hljs-keyword">new</span> URL(location.href);<br>    <span class="hljs-keyword">var</span> id = u.searchParams.get(<span class="hljs-string">&quot;id&quot;</span>);<br>    <span class="hljs-comment">//将这个id发送到后台服务器，让后台服务器从数据库里面取这个这个记录，返回给我</span><br>    <span class="hljs-keyword">var</span> loading = Qmsg.loading(<span class="hljs-string">&quot;正在加载数据...&quot;</span>);<br>    request.get(<span class="hljs-string">&quot;/roomInfo/findById&quot;</span>, &#123;<br>        <span class="hljs-attr">id</span>: id<br>    &#125;).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(res);<br>    &#125;).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(error);<br>        Qmsg.error(<span class="hljs-string">&quot;服务器错误&quot;</span>);<br>    &#125;).finally(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        loading.close();<br>    &#125;);<br>&#125;<br>getById();<br></code></pre></td></tr></table></figure>

<blockquote>
<p>这个时候数据已经可以获取回来了，我们要把数据放在页面上面，这里有两种方法</p>
</blockquote>
<h3 id="二十三、渲染编辑页面"><a href="#二十三、渲染编辑页面" class="headerlink" title="二十三、渲染编辑页面"></a>二十三、渲染编辑页面</h3><p><strong>第一种：直接以DOM的方式操作，这种效率非常低</strong></p>
<p><img src="https://pic.imgdb.cn/item/6178adcd2ab3f51d919a35b5.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211025190409838"></p>
<p>这一种方式非常简单，直接将值一个一个的赋值给DOM元素的value属性</p>
<p><strong>第二种：直接通过模板引擎渲染</strong></p>
<p><img src="https://pic.imgdb.cn/item/6178ae4f2ab3f51d919a83ee.png" srcset="/blog/img/loading.gif" lazyload alt="code1"></p>
<p>直接将需要渲染的部分使用模板引擎，然后用数据渲染就可以了</p>
<p><img src="https://pic.imgdb.cn/item/6178e9a62ab3f51d91c6227a.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211025191254627"></p>
<pre><code class=" mermaid">graph TD
A[roomInfoList.html]--&gt;|?id=12|B[editRoomInfo.html]
B--&gt;|ajax把id传递|C[&quot;router.get(&#x27;/findById&#x27;)&quot;]
C--&gt;|找到对象返回|B
</code></pre>

<h3 id="二十四、编辑房间信息页面保存数据"><a href="#二十四、编辑房间信息页面保存数据" class="headerlink" title="二十四、编辑房间信息页面保存数据"></a>二十四、编辑房间信息页面保存数据</h3><p><strong>RoomInfoService.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment">* <span class="hljs-doctag">@description </span>修改房间信息</span><br><span class="hljs-comment">* <span class="hljs-doctag">@param <span class="hljs-type">&#123;&#123; id, room_name, max_count, kt, network, washroom, room_size &#125;</span></span>&#125; param 要修改的参数</span><br><span class="hljs-comment">* <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;boolean&gt;&#125;</span></span></span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-title">update</span>(<span class="hljs-params">&#123; id, room_name, max_count, kt, network, washroom, room_size &#125;</span>)</span> &#123;<br>    <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` UPDATE rental_house.room_info SET room_name=?, max_count=?, kt=?, network=?, washroom=?, room_size=? WHERE id = ?;`</span><br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> <span class="hljs-built_in">this</span>.executeSql(strSql, [room_name, max_count, kt, network, washroom, room_size, id])<br>    <span class="hljs-keyword">return</span> results.affectedRows &gt; <span class="hljs-number">0</span> ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>roomInfoRoute.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.post(<span class="hljs-string">&quot;/update&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>        <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.roomInfoService.update(req.body);<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(results, results ? <span class="hljs-string">&quot;修改成功&quot;</span> : <span class="hljs-string">&quot;修改失败&quot;</span>));<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>        <span class="hljs-built_in">console</span>.log(error);<br>        resp.status(<span class="hljs-number">500</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, error));<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>editRoomInfo.html</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//这里一定要注意，使用事件委托</span><br>$(<span class="hljs-string">&quot;#form-addRoomInfo&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-string">&quot;#btn-save&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">if</span> (validateForm.form()) &#123;<br>        <span class="hljs-comment">// 表单验证成功以后，数据重新传回后台</span><br>        saveData();<br>    &#125;<br>&#125;);<br><br><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">saveData</span>(<span class="hljs-params"></span>) </span>&#123;<br>    request.post(<span class="hljs-string">&quot;/roomInfo/update&quot;</span>, &#123;<br>        <span class="hljs-attr">id</span>: $(<span class="hljs-string">&quot;#id&quot;</span>).val(),<br>        <span class="hljs-attr">room_name</span>: $(<span class="hljs-string">&quot;#room_name&quot;</span>).val(),<br>        <span class="hljs-attr">max_count</span>: $(<span class="hljs-string">&quot;#max_count&quot;</span>).val(),<br>        <span class="hljs-attr">kt</span>: $(<span class="hljs-string">&quot;[name=&#x27;kt&#x27;]:checked&quot;</span>).val(),<br>        <span class="hljs-attr">network</span>: $(<span class="hljs-string">&quot;[name=&#x27;network&#x27;]:checked&quot;</span>).val(),<br>        <span class="hljs-attr">washroom</span>: $(<span class="hljs-string">&quot;[name=&#x27;washroom&#x27;]:checked&quot;</span>).val(),<br>        <span class="hljs-attr">room_size</span>: $(<span class="hljs-string">&quot;#room_size&quot;</span>).val()<br>    &#125;).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;<br>        <span class="hljs-keyword">if</span> (res.status == <span class="hljs-string">&quot;success&quot;</span>) &#123;<br>            Qmsg.success(<span class="hljs-string">&quot;修改成功&quot;</span>);<br>            location.replace(<span class="hljs-string">&quot;./roomInfoList.html&quot;</span>);<br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            Qmsg.error(<span class="hljs-string">&quot;修改失败&quot;</span>);<br>        &#125;<br>    &#125;).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(error);<br>        Qmsg.error(<span class="hljs-string">&quot;服务器错误&quot;</span>);<br>    &#125;).finally(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        loading.close();<br>    &#125;);<br>&#125;<br></code></pre></td></tr></table></figure>

<h3 id="二十五、解决分页页码过多的问题"><a href="#二十五、解决分页页码过多的问题" class="headerlink" title="二十五、解决分页页码过多的问题"></a>二十五、解决分页页码过多的问题</h3><p><img src="https://pic.imgdb.cn/item/6178e9e52ab3f51d91c64edc.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211026085936545"></p>
<p>以之前的列表页面上面，我们可以看到这里有很多页面，我们不可以把所有的页面都显示出来 ，所以要在后台设置一下</p>
<p><strong>PageList.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PageList</span> </span>&#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * </span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;number&#125;</span> </span>pageIndex 当前第几页</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;number&#125;</span> </span>totalCount 共多少条数据</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;number&#125;</span> </span>pageSize  每页显示多少</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;[]&#125;</span> </span>listData 查询的分页列表数据 </span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params">pageIndex, totalCount, pageSize, listData</span>)</span> &#123;<br>        <span class="hljs-built_in">this</span>.pageIndex = pageIndex;<br>        <span class="hljs-built_in">this</span>.totalCount = totalCount;<br>        <span class="hljs-built_in">this</span>.pageCount = <span class="hljs-built_in">Math</span>.ceil(totalCount / pageSize);<br>        <span class="hljs-built_in">this</span>.listData = listData;<br>        <span class="hljs-built_in">this</span>.pageStart = <span class="hljs-built_in">this</span>.pageIndex - <span class="hljs-number">3</span> &gt; <span class="hljs-number">0</span> ? <span class="hljs-built_in">this</span>.pageIndex - <span class="hljs-number">3</span> : <span class="hljs-number">1</span>;<br>        <span class="hljs-built_in">this</span>.pageEnd = <span class="hljs-built_in">this</span>.pageStart + <span class="hljs-number">6</span> &gt; <span class="hljs-built_in">this</span>.pageCount ? <span class="hljs-built_in">this</span>.pageCount : <span class="hljs-built_in">this</span>.pageStart + <span class="hljs-number">6</span>;<br>    &#125;<br>&#125;<br><br><span class="hljs-built_in">module</span>.exports = PageList;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的构造函数里面，我们添加了两个属性，<code>pageStart</code>用于代表起始页码的位置 ，<code>pageEnd</code>用于代表结束页码的位置 </p>
</blockquote>
<p><strong>roomInfoList.html</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 渲染分页的页码 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/html&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp2&quot;</span>&gt;</span><span class="handlebars"><span class="xml"></span></span><br><span class="xml"><span class="handlebars">    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-index</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-item&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-link&quot;</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">    &lt;%for(var i=pageStart;i&lt;=pageEnd;i++)&#123;%&gt;</span></span><br><span class="xml"><span class="handlebars">    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-index</span>=<span class="hljs-string">&quot;</span></span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">i</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-item </span></span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">i</span>==pageIndex?<span class="hljs-string">&#x27;active&#x27;</span>:<span class="hljs-literal">null</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">i</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">    &lt;%&#125;%&gt;</span></span><br><span class="xml"><span class="handlebars">    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">data-index</span>=<span class="hljs-string">&quot;</span></span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">pageCount</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-item&quot;</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page-link&quot;</span>&gt;</span>尾页<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars"></span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="二十六、删除房间信息"><a href="#二十六、删除房间信息" class="headerlink" title="二十六、删除房间信息"></a>二十六、删除房间信息</h3><p><img src="https://pic.imgdb.cn/item/6178ea152ab3f51d91c67596.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211026090255913"></p>
<p>我们应该删除数据</p>
<p><strong>roomInfoRoute.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.get(<span class="hljs-string">&quot;/deleteById&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>        <span class="hljs-keyword">let</span> &#123; id &#125; = req.query;<br>        <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.roomInfoService.deleteById(id);<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(results, results ? <span class="hljs-string">&quot;删除成功&quot;</span> : <span class="hljs-string">&quot;删除失败&quot;</span>));<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>        <span class="hljs-built_in">console</span>.log(error);<br>        resp.status(<span class="hljs-number">500</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, error));<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>roomInfoList.html</strong></p>
<p><img src="https://pic.imgdb.cn/item/6178ea2a2ab3f51d91c687c2.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211026091208482"></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//使用事件委托</span><br>$(<span class="hljs-string">&quot;#table-roomInfo&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-string">&quot;.btn-delete&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">if</span> (confirm(<span class="hljs-string">&quot;确定要删除当前项吗？&quot;</span>)) &#123;<br>        <span class="hljs-keyword">var</span> id = $(<span class="hljs-built_in">this</span>).attr(<span class="hljs-string">&quot;data-id&quot;</span>);<br>        request.get(<span class="hljs-string">&quot;/roomInfo/deleteById&quot;</span>, &#123;<br>            <span class="hljs-attr">id</span>: id<br>        &#125;).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;<br>            <span class="hljs-keyword">if</span> (res.status == <span class="hljs-string">&quot;success&quot;</span>) &#123;<br>                Qmsg.success(<span class="hljs-string">&quot;删除成功&quot;</span>);<br>                getData(currentPageIndex);<br>            &#125; <span class="hljs-keyword">else</span> &#123;<br>                Qmsg.success(<span class="hljs-string">&quot;删除失败&quot;</span>);<br>            &#125;<br>        &#125;).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>&#123;<br>            <span class="hljs-built_in">console</span>.log(error);<br>            Qmsg.error(<span class="hljs-string">&quot;服务器错误，请联系管理员&quot;</span>);<br>        &#125;).finally(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>            <span class="hljs-comment">//无论是成功进入then还是失败进入catch,最后都会进入到finally</span><br>            loading.close();<br>        &#125;);<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>在上面的代码里面是没有问题的，它最大的问题在于数据库</p>
<p><strong>存在的问题</strong></p>
<ol>
<li><p>在开发过程当中，DBA不会给开发人员<code>delete</code>的权限</p>
<p><img src="https://pic.imgdb.cn/item/6178ea452ab3f51d91c69e61.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211026091751950"></p>
</li>
<li><p>在开发过程当中即使有了<code>delete</code>权限 ，但是因为主外键限制，如果这个表的某一项主键 被 另一个表使用了，则不能删除，因为主外键在约束的时候是默认不允许更新及删除的</p>
<p><img src="https://pic.imgdb.cn/item/6178ea552ab3f51d91c6ab80.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211026091521015"></p>
</li>
</ol>
<h3 id="二十七、逻辑删除（软删除）"><a href="#二十七、逻辑删除（软删除）" class="headerlink" title="二十七、逻辑删除（软删除）"></a>二十七、逻辑删除（软删除）</h3><p>因为在开发的过程当中，我们不能够直接删除数据，但是我们又想实现删除的效果，所以怎么办呢？</p>
<p>这个时候我们可以使用下面的方式完成，直接在所有表的后面添加一个字段叫<code>isDel</code>，它的类型为<code>tinyint(1)</code></p>
<p><img src="https://pic.imgdb.cn/item/6178ea842ab3f51d91c6d3ff.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211026092133173"></p>
<p><img src="https://pic.imgdb.cn/item/6178ea992ab3f51d91c6e570.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211026092232672"></p>
<p>这样所有的表在打开的时候都会当回事一列<code>isDel</code>，它的默认值就是0</p>
<blockquote>
<p>它有了默认值 ，则在添加数据的时候，即使我们不添加这一列它默认也是0</p>
</blockquote>
<p>我们可以把isDel<code>0</code>当成是这一列没有删除，我们可以把isDel为<code>1</code>代表删除了</p>
<p>接下来在所有查询语句的后面将原来的<code>where 1</code>替换成<code>where isDel = false </code></p>
<p>这个时候原来的删除方法<code>deleteById</code>就应该变成下面的方法</p>
<p><strong>BaseService.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment">* <span class="hljs-doctag">@description </span>根据一个主键删除信息 </span><br><span class="hljs-comment">* <span class="hljs-doctag">@param <span class="hljs-type">&#123;number&#125;</span> </span>id 主键  </span><br><span class="hljs-comment">* <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;boolean&gt;&#125;</span> </span>true代表删除成功,false代表删除失败</span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-title">deleteById</span>(<span class="hljs-params">id</span>)</span> &#123;<br>    <span class="hljs-comment">// let strSql = ` delete from $&#123;this.currentTableName&#125; where id = ? `;</span><br>    <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` update <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> set isDel = true where id = ? `</span><br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> <span class="hljs-built_in">this</span>.executeSql(strSql, [id]);<br>    <span class="hljs-keyword">return</span> results.affectedRows &gt; <span class="hljs-number">0</span> ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>逻辑删除也叫软删除，它本质上面是没有删除数据的，只慢在数据表里面添加了一列，用于标识这一项数据是否被删除掉</p>
<p>当我们要删除这一 项数据的时候，我们可以通过<code>update</code>语句当这一列的值改<code>true</code>或其它值</p>
</blockquote>
<h3 id="二十八、Excel的导出功能"><a href="#二十八、Excel的导出功能" class="headerlink" title="二十八、Excel的导出功能"></a>二十八、Excel的导出功能</h3><p><img src="https://pic.imgdb.cn/item/6178eace2ab3f51d91c71d72.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211026102939583"></p>
<p><strong>前端文件roomInfoList.html</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;.btn-export-excel&quot;</span>).on(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-comment">//地址栏的传值是get传值 ，后面是通过req.query来得到的</span><br>    <span class="hljs-built_in">window</span>.open(baseURL + <span class="hljs-string">&quot;/roomInfo/exportExcel?room_name=&quot;</span> + $(<span class="hljs-string">&quot;#room_name&quot;</span>).val());<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>在这里同学们要注意，我们使用了<code>window.open()</code>打开一个新的链接，并且在后面使用<code>?</code>拼接了参数，传递到了服务器</p>
<p><strong>RoomInfoService.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>导出为excel的数据，但是不需要分页</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;&#123;room_name&#125;</span></span>&#125; param 查询参数 </span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;[]&gt;&#125;</span> </span>返回查询结果 </span><br><span class="hljs-comment">*/</span><br><span class="hljs-function"><span class="hljs-title">exportExcel</span>(<span class="hljs-params">&#123; room_name &#125;</span>)</span> &#123;<br>    <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` select * from <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> where isDel = false `</span>;<br>    <span class="hljs-keyword">let</span> strWhere = <span class="hljs-string">` `</span>;<br>    <span class="hljs-keyword">let</span> ps = []<br>    <span class="hljs-keyword">if</span> (room_name) &#123;<br>        strWhere += <span class="hljs-string">` and room_name like ? `</span>;<br>        ps.push(<span class="hljs-string">`%<span class="hljs-subst">$&#123;room_name&#125;</span>%`</span>);<br>    &#125;<br>    strSql += strWhere;<br>    <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.executeSql(strSql, ps);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>roomInfoRoute.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.get(<span class="hljs-string">&quot;/exportExcel&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>        <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.roomInfoService.exportExcel(req.query);<br>        <span class="hljs-keyword">let</span> excelPath = ExcelUtils.resultsToExcel(results);<br>        <span class="hljs-keyword">if</span> (excelPath) &#123;<br>            <span class="hljs-comment">//生成好了</span><br>            resp.sendFile(excelPath);<br>        &#125;<br>        <span class="hljs-keyword">else</span> &#123;<br>            resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, <span class="hljs-string">&quot;excel没有数据，不能下载&quot;</span>));<br>        &#125;<br>    &#125; <span class="hljs-keyword">catch</span> (error) &#123;<br>        <span class="hljs-built_in">console</span>.log(error);<br>        resp.status(<span class="hljs-number">500</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, error));<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>ExcelUtils.js</strong></p>
<p>因为我们的excel导出是需要在其它的页面也使用的，所以我们单独封装了一个方法来使用，在<code>utils</code>目录下面我们新建了一个<code>ExcelUtils.js</code>的文件，代码如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * ExcelUtils.js 操作excel的对象</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">const</span> xlsx = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;node-xlsx&quot;</span>);<br><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;path&quot;</span>);<br><span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;fs&quot;</span>);<br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ExcelUtils</span> </span>&#123;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>数据库的查询结果转变成excel文件</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;[]&#125;</span> </span>results 数据库的查询结果 </span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;string&#125;</span> </span>返回生成的excel的路径</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">static</span> <span class="hljs-function"><span class="hljs-title">resultsToExcel</span>(<span class="hljs-params">results</span>)</span> &#123;<br>        <span class="hljs-keyword">if</span> (results.length &gt; <span class="hljs-number">0</span>) &#123;<br>            <span class="hljs-keyword">let</span> headRow = <span class="hljs-built_in">Object</span>.keys(results[<span class="hljs-number">0</span>]);<br>            <span class="hljs-keyword">let</span> dataRows = results.map(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> <span class="hljs-built_in">Object</span>.values(item));<br>            dataRows.unshift(headRow);<br>            <span class="hljs-keyword">let</span> excelObj = [<br>                &#123;<br>                    <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;Sheet1&quot;</span>,<br>                    <span class="hljs-attr">data</span>: dataRows<br>                &#125;<br>            ];<br>            <span class="hljs-comment">//设置一个保存路径</span><br>            <span class="hljs-keyword">let</span> savePath = path.join(__dirname, <span class="hljs-string">&quot;../excelDir&quot;</span>, <span class="hljs-string">`<span class="hljs-subst">$&#123;<span class="hljs-built_in">Date</span>.now()&#125;</span>-<span class="hljs-subst">$&#123;<span class="hljs-built_in">parseInt</span>(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">1000</span>)&#125;</span>.xlsx`</span>);<br>            <span class="hljs-keyword">let</span> excelBuff = xlsx.build(excelObj);<br>            fs.writeFileSync(savePath, excelBuff);<br>            <span class="hljs-keyword">return</span> savePath;<br>        &#125;<br>        <span class="hljs-keyword">else</span> &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;&quot;</span>;<br>        &#125;<br>    &#125;<br>&#125;<br><span class="hljs-built_in">module</span>.exports = ExcelUtils;<br></code></pre></td></tr></table></figure>

<p>在上面的代码里面，我们是通过<code>node-xlsx</code>生成了一个excel文件，然后在express里面通过<code>resp.sendFile</code>来发送一个文件到浏览器</p>
<h3 id="二十九、定期删除生成的excel文件"><a href="#二十九、定期删除生成的excel文件" class="headerlink" title="二十九、定期删除生成的excel文件"></a>二十九、定期删除生成的excel文件</h3><p>这个时候要注意，因为导出excel是需要在服务器生成excel文件的，所以服务器运行时间长了以后，必须要定时清除掉这些文件，如下图所示</p>
<img src="https://pic.imgdb.cn/item/6178eb182ab3f51d91c75bdb.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211026103504655" style="zoom: 50%;" />

<p>这个时候我们要在项目启动的时候添加一个定时器的功能，去完成上面的代码</p>
<p><strong>app.js里面</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs javascript">server.listen(<span class="hljs-number">8080</span>, <span class="hljs-string">&quot;0.0.0.0&quot;</span>, <span class="hljs-function">() =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;服务器启动成功&quot;</span>);<br><br>    <span class="hljs-keyword">const</span> deleteExcelFile = <span class="hljs-function">() =&gt;</span> &#123;<br>        <span class="hljs-keyword">let</span> excelDirPath = path.join(__dirname, <span class="hljs-string">&quot;./excelDir&quot;</span>);<br>        <span class="hljs-keyword">let</span> arr = fs.readdirSync(excelDirPath);<br>        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> arr) &#123;<br>            <span class="hljs-keyword">let</span> fileCreateTime = item.split(<span class="hljs-string">&quot;-&quot;</span>)[<span class="hljs-number">0</span>];<br>            <span class="hljs-keyword">if</span> (<span class="hljs-built_in">Date</span>.now() - fileCreateTime &gt; <span class="hljs-number">1000</span> * <span class="hljs-number">60</span> * <span class="hljs-number">30</span>) &#123;<br>                <span class="hljs-comment">//超过30分钟，要删除</span><br>                fs.unlinkSync(path.join(excelDirPath, item));<br>            &#125;<br>        &#125;<br>    &#125;<br>    <span class="hljs-comment">//在服务器启动的时候就执行一次</span><br>    deleteExcelFile();<br>    <span class="hljs-comment">//接下来开启定时器，定时执行</span><br>    <span class="hljs-built_in">setInterval</span>(deleteExcelFile, <span class="hljs-number">1000</span> * <span class="hljs-number">60</span> * <span class="hljs-number">30</span>)<br>&#125;);<br></code></pre></td></tr></table></figure>

<h3 id="三十、全局异常的处理"><a href="#三十、全局异常的处理" class="headerlink" title="三十、全局异常的处理"></a>三十、全局异常的处理</h3><p>在之前的代码里面，我们可以看到，我们对所有的代码都进行了<code>try...catch</code>的异常捕获，这样做非常麻烦</p>
<p>在<code>express</code>的框架里面，其实我们有一个全局异常处理的包叫<code>express-async-errors</code>，这个包可以全局捕获<code>express</code>的异常，这样我样就可以简化很多代码</p>
<p><strong>第一步：安装包</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install express-async-errors --save<br></code></pre></td></tr></table></figure>

<p><strong>第二步：在app.js程序启动的时候导入这个包</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;express&quot;</span>);<br><span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;express-async-errors&quot;</span>);<br></code></pre></td></tr></table></figure>

<p><strong>第三步：在程序的最后处理异常</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//在处理全局的异常</span><br>app.use(<span class="hljs-function">(<span class="hljs-params">error, req, resp, next</span>) =&gt;</span> &#123;<br>    <span class="hljs-built_in">console</span>.log(error);<br>    resp.status(<span class="hljs-number">500</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, <span class="hljs-string">&quot;服务器错误&quot;</span>, error));<br>    next();<br>&#125;);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>为什么在程序的最后去处理，是因为如果前面的程序处理了，我们就不处理，如果前面没有程序处理异常，我们就在这里处理掉，相当于把它做了最后一次的防线</p>
</blockquote>
<p>当我们使用了全局异常以后，这样在整个程序的内部，我们都不需要使用<code>try...catch</code>了</p>
<hr>
<h3 id="三十一、-总结一"><a href="#三十一、-总结一" class="headerlink" title="三十一、!!!总结一"></a>三十一、!!!总结一</h3><p>到此为止，我们已经完成了<code>room_info</code>这个数据表的增，删，改，查的功能了</p>
<ol>
<li>前端的项目和后端的项目是分开的，前端与后端的数据交互使用的是<code>ajax</code>请求</li>
<li><code>ajax</code>默认不允许跨域，所以要在设置添加响应头<code>CORS</code></li>
<li>路由就是用于控制请求的，ajax请求的其实是某一个路由地址</li>
<li>在请求的时候是可以传递数据到服务器的，<code>get</code>请求的请求参数在<code>url</code>的地址后面，后台接收值的时候使用<code>req.query</code>，<code>post</code>不在地址栏，它是通过<code>body</code>传递过去的，它在后台<code>req.body</code></li>
<li><code>express</code>的框架默认是不支持<code>post</code>请求的，需要借用于第三方插件<code>body-parser</code></li>
<li>路由返回的数据我们统一使用了<code>ResultJson</code>的格式来处理，这样前端在接收到json字符串的时候统一处理</li>
<li>前端的页面渲染，目前我们使用的是<code>art-template</code>模板引擎，后期我们全转向<code>vue/react</code></li>
<li>在开发的时候，数据库一般是默认不会开启<code>delete</code>权限，或因为主外键约束不能删除，所以我们在数据库里面要使用软删除的功能</li>
<li><code>resp.sendFile</code>用于向前台发送一个文件，我们的<code>excel</code>的导出功能就是基于此完成的</li>
<li>全局的异常处理我们使用了<code>express-async-errors</code>来完成，这样可以极大的简化我们的代码</li>
</ol>
<h3 id="三十二、新增管理员"><a href="#三十二、新增管理员" class="headerlink" title="三十二、新增管理员"></a>三十二、新增管理员</h3><p>当前模块虽然也是一个新增的模块，但是在这个模块上面我们主要是为了体现以下的几个点</p>
<ol>
<li>密码的<code>md5</code>加密</li>
<li>图片上传</li>
<li>省市区三级联动</li>
</ol>
<p><img src="https://pic.imgdb.cn/item/6178ebc02ab3f51d91c7ec76.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211026164728232"></p>
<h3 id="三十三、省市区三级联动"><a href="#三十三、省市区三级联动" class="headerlink" title="三十三、省市区三级联动"></a>三十三、省市区三级联动</h3><p>省市区三级联动是需要数据表的支持的，数据表的格式如下</p>
<img src="https://pic.imgdb.cn/item/6178ebd52ab3f51d91c80062.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211026143842484" style="zoom:50%;" />

<p><strong>在service的目录下面创建 AreaService.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>操作room_info数据表</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author </span>杨标</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@version </span>1.0</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-keyword">const</span> BaseServcie = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;./BaseService.js&quot;</span>);<br><span class="hljs-keyword">const</span> PageList = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;../model/PageList.js&quot;</span>);<br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AreaService</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">BaseServcie</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">super</span>();<br>        <span class="hljs-built_in">this</span>.currentTableName = <span class="hljs-built_in">this</span>.tableMap.area_info;<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>根据parentId查询下面的结构</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;number&#125;</span> </span>parentId 父级的id </span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;[]&gt;&#125;</span> </span>返回查询的结果</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-function"><span class="hljs-title">findListByParentId</span>(<span class="hljs-params">parentId</span>)</span> &#123;<br>        <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` select * from <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> where parentId =? `</span>;<br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.executeSql(strSql, [parentId]);<br>    &#125;<br>&#125;<br><span class="hljs-built_in">module</span>.exports = AreaService;<br></code></pre></td></tr></table></figure>

<p>同时在<code>ServiceFactory.js</code>里面写上注释 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@typedef <span class="hljs-variable">ServiceFactoryType</span></span></span><br><span class="hljs-comment"> * <span class="hljs-doctag">@property <span class="hljs-type">&#123;import(&quot;../service/RoomInfoService.js&quot;)&#125;</span> <span class="hljs-variable">roomInfoService</span></span></span><br><span class="hljs-comment"> * <span class="hljs-doctag">@property <span class="hljs-type">&#123;import(&quot;../service/AreaService.js&quot;)&#125;</span> <span class="hljs-variable">areaService</span></span></span><br><span class="hljs-comment"> */</span><br><br></code></pre></td></tr></table></figure>

<p><strong>在routes的目录下面创建 areaRoute.js文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;express&quot;</span>);<br><span class="hljs-keyword">const</span> router = express.Router();<br><br><span class="hljs-built_in">module</span>.exports = router;<br></code></pre></td></tr></table></figure>

<p><strong>在app.js里面要连接这个文件</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">app.use(<span class="hljs-string">&quot;/area&quot;</span>,<span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;./routes/areaRoute.js&quot;</span>));<br></code></pre></td></tr></table></figure>

<p><strong>addAdminInfo.html文件</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/html&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;temp1&quot;</span>&gt;</span><span class="handlebars"><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span>-请选择-<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        </span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name"><span class="hljs-builtin-name">each</span></span> list item index&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars">        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;</span></span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.areaId</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">&quot;</span>&gt;</span></span><span class="hljs-template-variable">&#123;&#123;<span class="hljs-name">item.areaName</span>&#125;&#125;</span><span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span></span></span><br><span class="xml"><span class="handlebars">        </span><span class="hljs-template-tag">&#123;&#123;/<span class="hljs-name"><span class="hljs-builtin-name">each</span></span>&#125;&#125;</span><span class="xml"></span></span><br><span class="xml"><span class="handlebars"></span></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">renderOptions</span>(<span class="hljs-params">parentId, targetElementId</span>) </span>&#123;<br>        request.get(<span class="hljs-string">&quot;/area/findListByParentId&quot;</span>, &#123;<br>            <span class="hljs-attr">parentId</span>: parentId<br>        &#125;).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;<br>            <span class="hljs-built_in">console</span>.log(res);<br>            <span class="hljs-keyword">if</span> (res.status == <span class="hljs-string">&quot;success&quot;</span>) &#123;<br>                <span class="hljs-keyword">var</span> htmlStr1 = template(<span class="hljs-string">&quot;temp1&quot;</span>, &#123;<br>                    <span class="hljs-attr">list</span>: res.data<br>                &#125;);<br>                $(targetElementId).html(htmlStr1);<br>            &#125;<br>        &#125;).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>&#123;<br>            <span class="hljs-built_in">console</span>.log(error);<br>            Qmsg.error(<span class="hljs-string">&quot;服务器错误&quot;</span>);<br>        &#125;);<br>    &#125;<br><br>    renderOptions(-<span class="hljs-number">1</span>, <span class="hljs-string">&quot;#sel_province&quot;</span>);<br>    $(<span class="hljs-string">&quot;#sel_province&quot;</span>).on(<span class="hljs-string">&quot;change&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-keyword">var</span> parentId = $(<span class="hljs-built_in">this</span>).val();<br>        renderOptions(parentId, <span class="hljs-string">&quot;#sel_city&quot;</span>);<br>        $(<span class="hljs-string">&quot;#sel_area&quot;</span>).empty();<br>    &#125;);<br>    $(<span class="hljs-string">&quot;#sel_city&quot;</span>).on(<span class="hljs-string">&quot;change&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        <span class="hljs-keyword">var</span> parentId = $(<span class="hljs-built_in">this</span>).val();<br>        renderOptions(parentId, <span class="hljs-string">&quot;#sel_area&quot;</span>);<br>    &#125;);<br><br>&#125;);<br></code></pre></td></tr></table></figure>

<hr>
<h3 id="三十四、图片上传"><a href="#三十四、图片上传" class="headerlink" title="三十四、图片上传"></a>三十四、图片上传</h3><p>在上面的UI界面里面，我们看到我们需上传一张管理员的图片，这个时候我们使用了<code>input</code>的文件选择框</p>
<p>但是这里有一个问题，我们要使用<code>ajax</code>将这个文件上传</p>
<p><strong>第一步：前端页面代码</strong></p>
<p>设置文件选择框只能选择图片</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">accept</span>=<span class="hljs-string">&quot;image/*&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;file&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-file-input&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;admin_photo_file&quot;</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>再监控它的变化，如果有文件被选中了，我们就上传图片</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-string">&quot;#admin_photo_file&quot;</span>).on(<span class="hljs-string">&quot;change&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> file = <span class="hljs-built_in">this</span>.files[<span class="hljs-number">0</span>];<br>    <span class="hljs-keyword">if</span> (file) &#123;<br>        <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/^image\/(jpe?g|png|gif|bmp|svg)$/</span>.test(file.type)) &#123;<br>            <span class="hljs-comment">// 模板一个form的表单对象</span><br>            <span class="hljs-keyword">var</span> formData = <span class="hljs-keyword">new</span> FormData();<br>            formData.append(<span class="hljs-string">&quot;admin_photo&quot;</span>, file);<br>            $.ajax(&#123;<br>                <span class="hljs-attr">url</span>: baseURL + <span class="hljs-string">&quot;/adminInfo/uploadAdminPhoto&quot;</span>,<br>                <span class="hljs-attr">method</span>: <span class="hljs-string">&quot;post&quot;</span>,<br>                <span class="hljs-attr">data</span>: formData,<br>                <span class="hljs-attr">processData</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">//不要对我的formData的数据做二次处理</span><br>                <span class="hljs-attr">contentType</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">//不要携带请求类型过去，因为我的文件就是原来的类型</span><br>                <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;<br>                    $(<span class="hljs-string">&quot;#img_admin_photo&quot;</span>).attr(<span class="hljs-string">&quot;src&quot;</span>, baseURL + res.data);<br>                    Qmsg.success(<span class="hljs-string">&quot;上传图片成功&quot;</span>);<br>                &#125;,<br>                <span class="hljs-attr">error</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>&#123;<br>                    <span class="hljs-built_in">console</span>.log(error);<br>                    Qmsg.error(<span class="hljs-string">&quot;上传失败&quot;</span>);<br>                &#125;,<br>                <span class="hljs-attr">xhr</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>                    <span class="hljs-keyword">var</span> xhr = $.ajaxSettings.xhr();<br>                    <span class="hljs-comment">// 上传的时候进进度发生改变的时候的事件</span><br>                    xhr.upload.onprogress = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>&#123;<br>                        <span class="hljs-keyword">var</span> precent = <span class="hljs-built_in">parseInt</span>(e.loaded / e.total * <span class="hljs-number">100</span>);<br>                        $(<span class="hljs-string">&quot;#img-upload-progress&quot;</span>).css(<span class="hljs-string">&quot;width&quot;</span>,precent+<span class="hljs-string">&quot;%&quot;</span>).text(precent+<span class="hljs-string">&quot;%&quot;</span>);<br>                    &#125;<br>                    <span class="hljs-keyword">return</span> xhr;<br>                &#125;<br>            &#125;)<br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            $(<span class="hljs-string">&quot;#admin_photo_file&quot;</span>).val(<span class="hljs-string">&quot;&quot;</span>);<br>        &#125;<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>



<p><strong>第二步：后端代码</strong></p>
<p>express默认是不运行文件上传的，所以如果想实现文件上传的功能，需要使用第三方的包<code>multer</code></p>
<p><strong>首先，我们需要去安装这一个包</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install multer --save<br></code></pre></td></tr></table></figure>

<p><strong>接下来，在需要的地方配置这一个包，adminInfoRoute.js配置</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author </span>杨标</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>roominfo的路由模块 </span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;express&quot;</span>);<br><span class="hljs-keyword">const</span> router = express.Router();<br><span class="hljs-keyword">const</span> ServiceFactory = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;../factory/ServiceFactory.js&quot;</span>);<br><span class="hljs-keyword">const</span> ResultJson = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;../model/ResultJson.js&quot;</span>);<br><span class="hljs-keyword">const</span> multer = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;multer&quot;</span>);<br><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;path&quot;</span>);<br><span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;fs&quot;</span>);<br><span class="hljs-keyword">const</span> uplaod = multer(&#123;<br>    <span class="hljs-comment">//设定保存目录</span><br>    <span class="hljs-attr">dest</span>: path.join(__dirname, <span class="hljs-string">&quot;../adminPhoto&quot;</span>),<br>    <span class="hljs-attr">limits</span>: &#123;<br>        <span class="hljs-comment">//限定文件大小为5MB</span><br>        <span class="hljs-attr">fileSize</span>: <span class="hljs-number">1024</span> * <span class="hljs-number">1024</span> * <span class="hljs-number">5</span><br>    &#125;<br>&#125;);<br><br><span class="hljs-comment">//上传图片</span><br>router.post(<span class="hljs-string">&quot;/uploadAdminPhoto&quot;</span>, uplaod.single(<span class="hljs-string">&quot;admin_photo&quot;</span>), <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">let</span> file = req.file;<br>    <span class="hljs-built_in">console</span>.log(file);<br>    resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">true</span>,<span class="hljs-string">&quot;文件上传成功&quot;</span>));<br>&#125;);<br><br><span class="hljs-built_in">module</span>.exports = router;<br></code></pre></td></tr></table></figure>

<p>当我们去测试了的时候，我们发现我们的文件已经可以上传了，但是我们的文件名子有问题，它没有后缀名，上传的文件信息如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>  <span class="hljs-attr">fieldname</span>: <span class="hljs-string">&#x27;admin_photo&#x27;</span>,<br>  <span class="hljs-attr">originalname</span>: <span class="hljs-string">&#x27;try4.jpg&#x27;</span>,<br>  <span class="hljs-attr">encoding</span>: <span class="hljs-string">&#x27;7bit&#x27;</span>,<br>  <span class="hljs-attr">mimetype</span>: <span class="hljs-string">&#x27;image/jpeg&#x27;</span>,<br>  <span class="hljs-attr">destination</span>: <span class="hljs-string">&#x27;D:\\杨标的工作文件\\班级教学笔记\\H2103\\1026\\code\\rental_house\\adminPhoto&#x27;</span>,<br>  <span class="hljs-attr">filename</span>: <span class="hljs-string">&#x27;aea8e416bfe8bb786c73513cd63eecf8&#x27;</span>,<br>  <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;D:\\杨标的工作文件\\班级教学笔记\\H2103\\1026\\code\\rental_house\\adminPhoto\\aea8e416bfe8bb786c73513cd63eecf8&#x27;</span>,<br>  <span class="hljs-attr">size</span>: <span class="hljs-number">49318</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>我们现在将后端路由的里面的代码改变成如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//上传图片</span><br>router.post(<span class="hljs-string">&quot;/uploadAdminPhoto&quot;</span>, uplaod.single(<span class="hljs-string">&quot;admin_photo&quot;</span>), <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">let</span> file = req.file;<br>    <span class="hljs-keyword">if</span> (file) &#123;<br>        fs.renameSync(file.path, file.path + file.originalname);<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">true</span>, <span class="hljs-string">&quot;文件上传成功&quot;</span>, <span class="hljs-string">`/adminPhoto/<span class="hljs-subst">$&#123;file.filename + file.originalname&#125;</span>`</span>));<br>    &#125;<br>    <span class="hljs-keyword">else</span> &#123;<br>        resp.status(<span class="hljs-number">404</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, <span class="hljs-string">&quot;没有接收到文件&quot;</span>));<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>这样前端在接收到值的时候就会显示得到如下的结果</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>    <span class="hljs-attr">data</span>: <span class="hljs-string">&quot;/adminPhoto/2cedad4ce7e7a74fc460c8c4be84f6362018上.jpg&quot;</span><br>	<span class="hljs-attr">msg</span>: <span class="hljs-string">&quot;文件上传成功&quot;</span><br>	<span class="hljs-attr">status</span>: <span class="hljs-string">&quot;success&quot;</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>上面的<code>data</code>接收到的就是文件的路径</p>
<p>接收到文件的路径以后，我们显示不出来</p>
<figure class="highlight apache"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs apache"><span class="hljs-attribute">http</span>://<span class="hljs-number">192.168.1.254:8080</span>/adminPhoto/<span class="hljs-number">2</span>cedad<span class="hljs-number">4</span>ce<span class="hljs-number">7</span>e<span class="hljs-number">7</span>a<span class="hljs-number">74</span>fc<span class="hljs-number">460</span>c<span class="hljs-number">8</span>c<span class="hljs-number">4</span>be<span class="hljs-number">84</span>f<span class="hljs-number">6362018</span>上.jpg<br></code></pre></td></tr></table></figure>

<p>图片不能显示，为什么呢？</p>
<h3 id="三十五、静态区域创建"><a href="#三十五、静态区域创建" class="headerlink" title="三十五、静态区域创建"></a>三十五、静态区域创建</h3><p>在<code>express</code>的服务器里面，所有浏览器需要的东西，我们都是通过<code>resp</code>来返回的，但是有些特殊情况不需要使用<code>resp</code>来返回，如上面的图片上传以后，保存以了一某一个文件夹，这个文件夹里面的图片应该是可以直接 访问，不需要经过<code>resp</code>的处理，这个时候，我们就需要使用到<code>express</code>框架的静态服务器技术</p>
<p>我们所有的图片现在都是放在<code>adminPhoto</code>这个文件夹下面</p>
<p><img src="https://pic.imgdb.cn/item/6178ec0a2ab3f51d91c82afa.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211026161118975"></p>
<p>我们现在需要 把这个目录设置为静态区域</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//设置静态区域</span><br>app.use(<span class="hljs-string">&quot;/adminPhoto&quot;</span>,express.static(path.join(__dirname,<span class="hljs-string">&quot;./adminPhoto&quot;</span>)));<br></code></pre></td></tr></table></figure>

<p>上面的代码的意思就是如果我发现请求的时候一级路径是<code>/adminPhoto</code>，我就把这个请求带到<code>adminPhoto</code>的目录，不要交给路由处理</p>
<h3 id="三十六、保存管理员的数据"><a href="#三十六、保存管理员的数据" class="headerlink" title="三十六、保存管理员的数据"></a>三十六、保存管理员的数据</h3><p>当我们图片上传，区域地址选中了以后，我们就可以开始来进行保存数据的操作，在保存数据之前，我们仍然要进行相应的表单验证</p>
<p><strong>第一步：表单验证</strong></p>
<p><img src="https://pic.imgdb.cn/item/6179ee022ab3f51d918b9246.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211027092232006"></p>
<p>图片需要添加一个隐藏的域，做表单验证，同时在表单验证的插件里面，设置如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> validateForm = $(<span class="hljs-string">&quot;#form-addAdminInfo&quot;</span>).validate(&#123;<br>    <span class="hljs-attr">ignore</span>: [],			<span class="hljs-comment">//添加这一行代码</span><br>    <span class="hljs-attr">errorClass</span>: <span class="hljs-string">&quot;text-danger&quot;</span>,<br>    <span class="hljs-attr">errorPlacement</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">errorElement, currentElement</span>) </span>&#123;<br>        currentElement.parentsUntil(<span class="hljs-string">&quot;form&quot;</span>).find(<span class="hljs-string">&quot;div.text-danger&quot;</span>).append(errorElement);<br>    &#125;,<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>第二步：保存数据到后台，addAdminInfo.html</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">saveData</span>(<span class="hljs-params"></span>) </span>&#123;<br>    <span class="hljs-keyword">var</span> loading = Qmsg.loading(<span class="hljs-string">&quot;正在保存数据...&quot;</span>);<br>    request.post(<span class="hljs-string">&quot;/adminInfo/add&quot;</span>, &#123;<br>        <span class="hljs-attr">admin_name</span>: $(<span class="hljs-string">&quot;#admin_name&quot;</span>).val(),<br>        <span class="hljs-attr">admin_sex</span>: $(<span class="hljs-string">&quot;#admin_sex&quot;</span>).val(),<br>        <span class="hljs-attr">admin_tel</span>:$(<span class="hljs-string">&quot;#admin_tel&quot;</span>).val(),<br>        <span class="hljs-attr">admin_pwd</span>: $(<span class="hljs-string">&quot;#admin_pwd&quot;</span>).val(),<br>        <span class="hljs-attr">admin_email</span>: $(<span class="hljs-string">&quot;#admin_email&quot;</span>).val(),<br>        <span class="hljs-attr">admin_photo</span>: $(<span class="hljs-string">&quot;#admin_photo&quot;</span>).val(),<br>        <span class="hljs-attr">admin_address</span>: [<br>            $(<span class="hljs-string">&quot;#sel_province&gt;option:selected&quot;</span>).text(),<br>            $(<span class="hljs-string">&quot;#sel_city&gt;option:selected&quot;</span>).text(),<br>            $(<span class="hljs-string">&quot;#sel_area&gt;option:selected&quot;</span>).text(),<br>            $(<span class="hljs-string">&quot;#detail_addr&quot;</span>).val()<br>        ].join(<span class="hljs-string">&quot; &quot;</span>)<br>    &#125;).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;<br>        <span class="hljs-keyword">if</span> (res.status == <span class="hljs-string">&quot;success&quot;</span>) &#123;<br>            Qmsg.success(<span class="hljs-string">&quot;保存成功&quot;</span>)<br>        &#125; <span class="hljs-keyword">else</span> &#123;<br>            Qmsg.error(<span class="hljs-string">&quot;保存失败&quot;</span>);<br>        &#125;<br>    &#125;).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>&#123;<br>        <span class="hljs-built_in">console</span>.log(error);<br>        Qmsg.error(<span class="hljs-string">&quot;服务器错误&quot;</span>);<br>    &#125;).finally(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>        loading.close();<br>    &#125;);<br>&#125;<br></code></pre></td></tr></table></figure>

<p><strong>第三步：后台路由接收adminInfoRoute.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.post(<span class="hljs-string">&quot;/add&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.adminInfoService.add(req.body);<br>    resp.json(<span class="hljs-keyword">new</span> ResultJson(results, results ? <span class="hljs-string">&quot;新增成功&quot;</span> : <span class="hljs-string">&quot;新增失败&quot;</span>));<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>第四步：后台servcie保存数据AdminInfoService.js</strong></p>
<blockquote>
<p>注意：所有新的Service都要在ServiceFactory.js里面添加注释，这样写代码会有提示</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>操作room_info数据表</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author </span>杨标</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@version </span>1.0</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-keyword">const</span> BaseServcie = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;./BaseService.js&quot;</span>);<br><span class="hljs-keyword">const</span> PageList = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;../model/PageList.js&quot;</span>);<br><span class="hljs-keyword">const</span> md5 = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;md5-node&quot;</span>);<br><span class="hljs-keyword">const</span> AppConfig = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;../config/AppConfig&quot;</span>);<br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AdminInfoServcie</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">BaseServcie</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">super</span>();<br>        <span class="hljs-built_in">this</span>.currentTableName = <span class="hljs-built_in">this</span>.tableMap.admin_info;<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>新增一个管理员</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@param <span class="hljs-type">&#123;&#123; admin_name, admin_sex, admin_tel, admin_pwd, admin_email, admin_photo, admin_address &#125;</span></span>&#125; param 新增的对象 </span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;boolean&gt;&#125;</span></span></span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-title">add</span>(<span class="hljs-params">&#123; admin_name, admin_sex, admin_tel, admin_pwd, admin_email, admin_photo, admin_address &#125;</span>)</span> &#123;<br>        admin_pwd = md5(admin_pwd + AppConfig.md5Salt);<br>        <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` INSERT INTO <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> ( admin_name, admin_sex, admin_tel, admin_pwd, admin_email, admin_photo, admin_address) VALUES (?, ?, ?, ?, ?, ?, ?); `</span>;<br>        <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> <span class="hljs-built_in">this</span>.executeSql(strSql, [admin_name, admin_sex, admin_tel, admin_pwd, admin_email, admin_photo, admin_address]);<br>        <span class="hljs-keyword">return</span> results.affectedRows &gt; <span class="hljs-number">0</span> ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>;<br>    &#125;<br>&#125;<br><br><span class="hljs-built_in">module</span>.exports = AdminInfoServcie;<br></code></pre></td></tr></table></figure>

<blockquote>
<p> 在上面的Service里面，我们对我们的代码进行了md5加密+加盐处理</p>
</blockquote>
<p><strong>第五步：设置md5的盐config/AppConfig.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> AppConfig = &#123;<br>    <span class="hljs-attr">md5Salt</span>: <span class="hljs-string">&quot;oausdfpasdfja_)qlwke&quot;</span><br>&#125;<br><span class="hljs-built_in">module</span>.exports = AppConfig;<br></code></pre></td></tr></table></figure>

<h3 id="三十七、密码的md5加密"><a href="#三十七、密码的md5加密" class="headerlink" title="三十七、密码的md5加密"></a>三十七、密码的md5加密</h3><p>md5是一种不可解密的加密模式，它会将原来的字符串生成一个字符串，nodejs里面的md5加密有很多种方式，我们可以使用第三方包来完成<code>md5-node</code></p>
<p><strong>第一步：安装依赖包</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install md5-node --save<br></code></pre></td></tr></table></figure>

<p><strong>第二步：使用这个包</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> md5 = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;md5-node&quot;</span>);<br><br><span class="hljs-keyword">let</span> str = <span class="hljs-string">&quot;biaogege520&quot;</span>;<br><span class="hljs-keyword">let</span> str1 = md5(str);<br><br><span class="hljs-built_in">console</span>.log((str1));<br></code></pre></td></tr></table></figure>

<p>但是这一种试试有隐患，因为对于一些常见的密码即使加密以后，后面的一些网站也可以进行穷举解密，所以这个时候我们就要对我们的加密进行<strong>加盐</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> md5 = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;md5-node&quot;</span>);<br><br><span class="hljs-keyword">let</span> str = <span class="hljs-string">&quot;123456&quot;</span>;<br><span class="hljs-keyword">let</span> str1 = md5(str+<span class="hljs-string">&quot;hjdlafhjsdlfh12312osd&quot;</span>);<br><br><span class="hljs-built_in">console</span>.log(str1);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>所谓的加盐其实就是在原有加密的基础字符串后面再添加一无规律的字符串，防止原来加密的文本太简单了</p>
</blockquote>
<blockquote>
<p>要求：新增管理员，管理员列表 ，删除管理员，编辑管理员信息，看一下登陆页面</p>
</blockquote>
<h3 id="三十八、登陆"><a href="#三十八、登陆" class="headerlink" title="三十八、登陆"></a>三十八、登陆</h3><p>在登陆的页面上面，我们要配置滑块验证码，然后再做表单验证，代码如下</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;zh&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;renderer&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;webkit&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>宿舍管理系统<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/bootstrap/css/bootstrap.min.css&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/bootstrap/font/bootstrap-icons.css&quot;</span>&gt;</span><br>    <span class="hljs-comment">&lt;!--[if lt ie 9]&gt;</span><br><span class="hljs-comment">    &lt;script src=&quot;./css/bootstrap/html5shiv.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="hljs-comment">    &lt;script src=&quot;./css/bootstrap/respond.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="hljs-comment">    &lt;![endif]--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./js/jquery_slider/jquery.slider.css&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./css/login.css&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./img/login_background.jpeg&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bg-img&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;login-box px-4&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;text-light text-center pt-4&quot;</span>&gt;</span>宿舍管理系统<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mt-4&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;form-login&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;input-group&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;input-group-prepend&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;input-group-text&quot;</span>&gt;</span>账号<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;zh&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;zh&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-control&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;ID/手机号/邮箱&quot;</span></span><br><span class="hljs-tag">                        <span class="hljs-attr">data-rule-required</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">data-msg-required</span>=<span class="hljs-string">&quot;账号不能为空&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;input-group&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;input-group-prepend&quot;</span>&gt;</span><br>                        <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;input-group-text&quot;</span>&gt;</span>密码<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;admin_pwd&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;admin_pwd&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;password&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-control&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;密码&quot;</span></span><br><span class="hljs-tag">                        <span class="hljs-attr">data-rule-required</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">data-msg-required</span>=<span class="hljs-string">&quot;密码不能为空&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;slider-v-code&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;form-group row&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col text-center&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn-login&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn btn-info btn-block&quot;</span>&gt;</span>登录系统<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col text-center&quot;</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;btn btn-dark btn-block&quot;</span>&gt;</span>忘记密码<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;copyright text-center font-weight-bold&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>copyright softeem·杨标<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>版权所有<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery-3.5.1.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./css/bootstrap/js/bootstrap.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery.validate.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/messages_zh.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/message.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/jquery_slider/jquery.slider.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./js/base.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">    $(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        $(<span class="hljs-string">&quot;#slider-v-code&quot;</span>).slider(&#123;</span><br><span class="javascript">            <span class="hljs-attr">width</span>: $(<span class="hljs-string">&quot;#slider-v-code&quot;</span>).width(), <span class="hljs-comment">// width</span></span><br><span class="javascript">            <span class="hljs-attr">height</span>: <span class="hljs-number">40</span>, <span class="hljs-comment">// height</span></span><br><span class="javascript">            <span class="hljs-attr">sliderBg</span>: <span class="hljs-string">&quot;rgb(134, 134, 131)&quot;</span>, <span class="hljs-comment">// 滑块背景颜色</span></span><br><span class="javascript">            <span class="hljs-attr">color</span>: <span class="hljs-string">&quot;#fff&quot;</span>, <span class="hljs-comment">// 文字颜色</span></span><br><span class="javascript">            <span class="hljs-attr">fontSize</span>: <span class="hljs-number">14</span>, <span class="hljs-comment">// 文字大小</span></span><br><span class="javascript">            <span class="hljs-attr">bgColor</span>: <span class="hljs-string">&quot;#7ecdb6&quot;</span>, <span class="hljs-comment">// 背景颜色</span></span><br><span class="javascript">            <span class="hljs-attr">textMsg</span>: <span class="hljs-string">&quot;按住滑块，拖拽验证&quot;</span>, <span class="hljs-comment">// 提示文字</span></span><br><span class="javascript">            <span class="hljs-attr">successMsg</span>: <span class="hljs-string">&quot;验证通过了哦&quot;</span>, <span class="hljs-comment">// 验证成功提示文字</span></span><br><span class="javascript">            <span class="hljs-attr">successColor</span>: <span class="hljs-string">&quot;red&quot;</span>, <span class="hljs-comment">// 滑块验证成功提示文字颜色</span></span><br><span class="javascript">            <span class="hljs-attr">time</span>: <span class="hljs-number">400</span>, <span class="hljs-comment">// 返回时间</span></span><br><span class="javascript">            <span class="hljs-attr">callback</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">result</span>) </span>&#123; <span class="hljs-comment">// 回调函数，true(成功),false(失败)</span></span><br><span class="javascript">                <span class="hljs-keyword">if</span> (result) &#123;</span><br><span class="javascript">                    $(<span class="hljs-string">&quot;#btn-login&quot;</span>).one(<span class="hljs-string">&quot;click&quot;</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">                        checkLogin();</span><br><span class="javascript">                    &#125;);</span><br><span class="javascript">                &#125;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;);</span><br><span class="javascript">        <span class="hljs-keyword">var</span> validateForm = $(<span class="hljs-string">&quot;#form-login&quot;</span>).validate(&#123;</span><br><span class="javascript">            <span class="hljs-attr">errorClass</span>: <span class="hljs-string">&quot;text-warning font-weight-bold&quot;</span>,</span><br><span class="javascript">            <span class="hljs-attr">errorPlacement</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">errorElement, currentElement</span>) </span>&#123;</span><br><span class="javascript">                currentElement.parent().parent().append(errorElement);</span><br><span class="javascript">            &#125;,</span><br><span class="javascript">        &#125;);</span><br><span class="javascript"></span><br><span class="javascript">        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">checkLogin</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">if</span> (validateForm.form()) &#123;</span><br><span class="javascript">				checkLogin();</span><br><span class="javascript">            &#125; <span class="hljs-keyword">else</span> &#123;</span><br><span class="javascript">                <span class="hljs-comment">//让滑块还原</span></span><br><span class="javascript">                $(<span class="hljs-string">&quot;#slider-v-code&quot;</span>).slider(<span class="hljs-string">&quot;restore&quot;</span>);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;</span><br><span class="javascript">		 <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">checkLogin</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">                <span class="hljs-keyword">if</span> (validateForm.form()) &#123;</span><br><span class="javascript">                    <span class="hljs-keyword">var</span> loading = Qmsg.loading(<span class="hljs-string">&quot;正在登陆中....&quot;</span>)</span><br><span class="javascript">                    request.post(<span class="hljs-string">&quot;/adminInfo/checkLogin&quot;</span>, &#123;</span><br><span class="javascript">                        <span class="hljs-attr">zh</span>: $(<span class="hljs-string">&quot;#zh&quot;</span>).val(),</span><br><span class="javascript">                        <span class="hljs-attr">admin_pwd</span>: $(<span class="hljs-string">&quot;#admin_pwd&quot;</span>).val()</span><br><span class="javascript">                    &#125;).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;</span><br><span class="javascript">                        <span class="hljs-built_in">console</span>.log(res);</span><br><span class="javascript">                        <span class="hljs-keyword">if</span> (res.status == <span class="hljs-string">&quot;success&quot;</span>) &#123;</span><br><span class="javascript">                            Qmsg.success(<span class="hljs-string">&quot;登陆成功&quot;</span>);</span><br><span class="javascript">                            location.replace(<span class="hljs-string">&quot;./adminIndex.html&quot;</span>);</span><br><span class="javascript">                        &#125; <span class="hljs-keyword">else</span> &#123;</span><br><span class="javascript">                            Qmsg.error(<span class="hljs-string">&quot;登陆失败,账号与密码不正确&quot;</span>);</span><br><span class="javascript">                        &#125;</span><br><span class="javascript">                    &#125;).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>&#123;</span><br><span class="javascript">                        Qmsg.error(<span class="hljs-string">&quot;服务器错误&quot;</span>);</span><br><span class="javascript">                    &#125;).finally(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">                        loading.close();</span><br><span class="javascript">                        $(<span class="hljs-string">&quot;#slider-v-code&quot;</span>).slider(<span class="hljs-string">&quot;restore&quot;</span>);</span><br><span class="javascript">                    &#125;)</span><br><span class="javascript">                &#125; <span class="hljs-keyword">else</span> &#123;</span><br><span class="javascript">                    <span class="hljs-comment">//让滑块还原</span></span><br><span class="javascript">                    $(<span class="hljs-string">&quot;#slider-v-code&quot;</span>).slider(<span class="hljs-string">&quot;restore&quot;</span>);</span><br><span class="javascript">                &#125;</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;);</span><br><span class="javascript"></span><br><span class="javascript">    &#125;)</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/6179eeb52ab3f51d918be841.jpg" srcset="/blog/img/loading.gif" lazyload alt="image-20211027153552722"></p>
<p><strong>adminInfoRoute.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.post(<span class="hljs-string">&quot;/checkLogin&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.adminInfoService.checkLogin(req.body);<br>    <span class="hljs-keyword">if</span> (results) &#123;<br>        <span class="hljs-comment">//登陆成功</span><br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">true</span>, <span class="hljs-string">&quot;登陆成功&quot;</span>));<br>    &#125;<br>    <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-comment">//登陆失败</span><br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, <span class="hljs-string">&quot;登陆失败,账号或密码不正确&quot;</span>));<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<p><strong>AdminInfoService.js</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs javascript"> <span class="hljs-comment">/**</span><br><span class="hljs-comment">* <span class="hljs-doctag">@description </span>检测登陆</span><br><span class="hljs-comment">* <span class="hljs-doctag">@param <span class="hljs-type">&#123;&#123;zh,admin_pwd&#125;</span></span>&#125; param 登陆的账号与密码 </span><br><span class="hljs-comment">* <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;object&gt;&#125;</span> </span>登陆查询的结果</span><br><span class="hljs-comment">*/</span><br><span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-title">checkLogin</span>(<span class="hljs-params">&#123; zh, admin_pwd &#125;</span>)</span> &#123;<br>    <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` select * from <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.currentTableName&#125;</span> where isDel = false and admin_pwd = ? `</span><br>    admin_pwd = md5(admin_pwd + AppConfig.md5Salt);<br>    <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/</span>.test(zh)) &#123;<br>        <span class="hljs-comment">//说明是邮箱</span><br>        strSql += <span class="hljs-string">` and admin_email = ? `</span>;<br>    &#125;<br>    <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-regexp">/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]&#123;8&#125;$/</span>.test(zh)) &#123;<br>        <span class="hljs-comment">//说明是手机号</span><br>        strSql += <span class="hljs-string">` and admin_tel = ? `</span>;<br>    &#125;<br>    <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-comment">//id</span><br>        strSql += <span class="hljs-string">` and id = ? `</span>;<br>    &#125;<br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> <span class="hljs-built_in">this</span>.executeSql(strSql, [admin_pwd, zh]);<br>    <span class="hljs-keyword">return</span> results[<span class="hljs-number">0</span>];<br>&#125;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，我们可以看到对账号进行正则表达式的验证来区分它是邮箱，还是手机号还是真正的ID</p>
</blockquote>
<p><img src="https://pic.imgdb.cn/item/6179efff2ab3f51d918c8a05.jpg" srcset="/blog/img/loading.gif" lazyload alt="image-20211027155838636"></p>
<h3 id="三十九、http请求头与请求主体"><a href="#三十九、http请求头与请求主体" class="headerlink" title="三十九、http请求头与请求主体"></a>三十九、http请求头与请求主体</h3><p>现在我们使用的是前后端分离开发方式，在这一种开发方式里面，所有的数据都是通过<code>ajax</code>来进行请求的，并且我们在后端也取消了跨域的限制条件，开启了CORS，所以任何人应该都可以通过一个路径来请求到后端的数据，如下</p>
<figure class="highlight http"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs http">http://192.168.1.254:8080/roomInfo/getListByPage?room_name=&amp;pageIndex=1<br></code></pre></td></tr></table></figure>

<p>任何人都可以通过上面的地址来请求我的数据，这个时候数据就很不安全。我们在上面的模块里面已经接触到了登录，我们现在希望这些数据是登录以后才能请求到的，怎么办呢？</p>
<p><strong>这个时候我们就深入的去分析一下HTTP的请求协议</strong></p>
<p>在现行的B/S（B：Browser，S：Service）架构开发里面，数据的交互方式多半采用<code>http/https</code>来进行传输，但使用这一种协议进行传值的时候会产生一个会话<code>session</code>,在这个传话的session内部有两个大家所熟悉的对象，一个是<code>request</code>，一个是<code>response</code></p>
<img src="https://pic.imgdb.cn/item/6179f01d2ab3f51d918c9a43.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211027161949789" style="zoom: 50%;" />

<h3 id="四十、JWT鉴权【重难点】"><a href="#四十、JWT鉴权【重难点】" class="headerlink" title="四十、JWT鉴权【重难点】"></a>四十、JWT鉴权【重难点】</h3><p>根据上面的分析，我们不能让所有的请求随意的进入到服务器，我们要对进入到服务器的请求执行拦截操作</p>
<p>**第一步：AppConfig.js里面，我们设置了要排队的路径，也就是不做验证的做路径 **</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> AppConfig = &#123;<br>    <span class="hljs-attr">md5Salt</span>: <span class="hljs-string">&quot;oausdfpasdfja_)qlwke&quot;</span>,<br>    <span class="hljs-comment">// 设置一个数组,里面设置的路径 ,外边都不要拦下来</span><br>    <span class="hljs-attr">excludePath</span>: [<br>        <span class="hljs-regexp">/\/adminInfo\/checkLogin/</span><br>    ]<br>&#125;<br><br><span class="hljs-built_in">module</span>.exports = AppConfig;<br></code></pre></td></tr></table></figure>

<p><strong>第二步：放开预检请求options</strong></p>
<p><img src="https://pic.imgdb.cn/item/6179f0a72ab3f51d918ce52d.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211027163846816"></p>
<p>因为之前的Ajax涉及到了跨域的问题，浏览器于对于所有的跨域请求都会执行预检操作（发起一个options请求），对于这个操作，我也要放行</p>
<p><img src="https://pic.imgdb.cn/item/6179f1b02ab3f51d918d5f60.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211027164449686"></p>
<p><strong>第三步：发送token命令</strong></p>
<p>目前token发放比较好的第三方包就是典型的<code>jsonwebtoken</code>，简称JWT，它是一个第三方的包</p>
<p><strong>先安装这个包</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install jsonwebtoken --save<br></code></pre></td></tr></table></figure>

<p><strong>登录成功以后发送token</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs javascript">router.post(<span class="hljs-string">&quot;/checkLogin&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.adminInfoService.checkLogin(req.body);<br>    <span class="hljs-keyword">if</span> (results) &#123;<br>        <span class="hljs-comment">//登陆成功</span><br>        <span class="hljs-comment">//发放token</span><br>        <span class="hljs-keyword">let</span> token = jwt.sign(&#123;<br>            <span class="hljs-attr">adminInfo</span>: results<br>        &#125;, AppConfig.jwtKey, &#123;<br>            <span class="hljs-attr">expiresIn</span>: <span class="hljs-number">60</span> * <span class="hljs-number">30</span><br>        &#125;);<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">true</span>, <span class="hljs-string">&quot;登陆成功&quot;</span>, token));<br>    &#125;<br>    <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-comment">//登陆失败</span><br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, <span class="hljs-string">&quot;登陆失败,账号或密码不正确&quot;</span>));<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>因为token是可以解密的，所以我们需要设置加盐，也就是加一个密钥</p>
</blockquote>
<p><strong>AppConfig.js文件里面</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> AppConfig = &#123;<br>    <span class="hljs-attr">md5Salt</span>: <span class="hljs-string">&quot;oausdfpasdfja_)qlwke&quot;</span>,<br>    <span class="hljs-comment">// 设置一个数组,里面设置的路径 ,外边都不要拦下来</span><br>    <span class="hljs-attr">excludePath</span>: [<br>        <span class="hljs-regexp">/\/adminInfo\/checkLogin/</span><br>    ],<br>    <span class="hljs-comment">// JWT颁发令牌的解钥</span><br>    <span class="hljs-attr">jwtKey</span>: <span class="hljs-string">&quot;alkdsfhalkjsdfhakld123&quot;</span><br>&#125;<br><br><span class="hljs-built_in">module</span>.exports = AppConfig;<br></code></pre></td></tr></table></figure>

<p>最后当我们登陆的时候，我们就可以看到如下的结果了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>    <span class="hljs-attr">data</span>: <span class="hljs-string">&quot;eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhZG1pbkluZm8iOnsiaWQiOjEwMDA0LCJhZG1pbl9uYW1lIjoi5p2o5qCHIiwiYWRtaW5fc2V4Ijoi55S3IiwiYWRtaW5fdGVsIjoiMTg2MjcxMDk5OTkiLCJhZG1pbl9wd2QiOiJlODJiZTQ5YTI2MzNlYWJmY2JkNDM2ZWM0ZTRhODA0MSIsImFkbWluX2VtYWlsIjoibG92ZXNuc2ZpQDE2My5jb20iLCJhZG1pbl9waG90byI6Ii9hZG1pblBob3RvLzllOWU3ZTYwYTg5Y2M4ZWIxMTUzODJkMzg2NjkyYTBiMjAxOOS4ii5qcGciLCJhZG1pbl9hZGRyZXNzIjoi5rmW5YyX55yBIOatpuaxieW4giDmsZ_lpI_ljLog5YWJ6LC35aSn6YGT6YeR6J6N5rivQjI35qCLIiwiaXNEZWwiOjB9LCJpYXQiOjE2MzUzMjU1MjYsImV4cCI6MTYzNTMyNzMyNn0.kYI0q8hEExhpZcJvZBAiYHA8hAZ22QHOCzihJ94exhs&quot;</span><br>	<span class="hljs-attr">msg</span>: <span class="hljs-string">&quot;登陆成功&quot;</span><br>	<span class="hljs-attr">status</span>: <span class="hljs-string">&quot;success&quot;</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>上面的<code>data</code>就是服务颁发给我们的<code>token</code></p>
<p>当我们得到这个<code>token</code>以后，我们在以后的请求当中就需要把这个<code>token</code>携带到服务器去，读取问题的是放在请求的什么地方呢？</p>
<p>根据上我们在上一个章节讲<code>HTTP</code>的请求协议里面，我们可以看到，最先到达服务器的一定是<code>header</code></p>
<blockquote>
<p>说一具很形象的话，把每次请求看成是一辆小车，token相当于车牌，应该放在车头</p>
</blockquote>
<p><img src="https://pic.imgdb.cn/item/6179f1cc2ab3f51d918d6b4f.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211027171251163"></p>
<p>在上面的截图里面，我们把<code>token</code>放在了<code>sessionStroage</code>里面，这样在不关闭浏览器的情况之下， 我们就可以一直使用<code>token</code>,关键以后就会自动的消失</p>
<p><span style="color:red;font-size:18px;font-weight:bold">为Ajax的每次请求都携带token</span></p>
<p>现在所有的数据请求都是基于Ajax的，所以我要在ajax请求的时候携带</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> request = &#123;<br>    <span class="hljs-attr">get</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">url, data</span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">resolve, reject</span>) </span>&#123;<br>            $.ajax(&#123;<br>                <span class="hljs-attr">url</span>: baseURL + url,<br>                <span class="hljs-attr">method</span>: <span class="hljs-string">&quot;get&quot;</span>,<br>                <span class="hljs-attr">data</span>: data,<br>                <span class="hljs-attr">beforeSend</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">xhr</span>) </span>&#123;<br>                    <span class="hljs-comment">//检测一下sessionStorage有没有rental_house_token这个缓存</span><br>                    <span class="hljs-keyword">var</span> rental_house_token = sessionStorage.getItem(<span class="hljs-string">&quot;rental_house_token&quot;</span>);<br>                    <span class="hljs-keyword">if</span> (rental_house_token) &#123;<br>                        xhr.setRequestHeader(<span class="hljs-string">&quot;rental_house_token&quot;</span>, rental_house_token);<br>                    &#125;<br>                    <span class="hljs-keyword">return</span> xhr;<br>                &#125;,<br>                <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">res</span>) </span>&#123;<br>                    resolve(res);<br>                &#125;,<br>                <span class="hljs-attr">error</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>&#123;<br>                    reject(error);<br>                &#125;,<br>            &#125;);<br>        &#125;);<br>    &#125;,<br>    <span class="hljs-comment">//POST请求是一样的，此处省略代码</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>当然我们设置上面的代码，携带token去发送请求的时候，又有下面新的错误</p>
<p><img src="https://pic.imgdb.cn/item/6179f1e02ab3f51d918d73a6.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211027172359411"></p>
<p><img src="https://pic.imgdb.cn/item/6179f45f2ab3f51d918e9128.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211027172542960"></p>
<p>这是因为我们之前只允许改变<code>Content-Type</code>的header，而现在我们改变了 另一个<code>header</code></p>
<p><img src="https://pic.imgdb.cn/item/617a162b2ab3f51d91a4671a.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211027172635809"></p>
<p>我们改变了<code>rental_house_token</code></p>
<p>为了解决上面的问题，我们把之前的跨域的设置如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//设置一个拦截器,添加响应头,实现CORS</span><br>app.use(<span class="hljs-function">(<span class="hljs-params">req, resp, next</span>) =&gt;</span> &#123;<br>    resp.setHeader(<span class="hljs-string">&quot;Access-Control-Allow-Headers&quot;</span>, <span class="hljs-string">&quot;rental_house_token,*&quot;</span>);<br>    resp.setHeader(<span class="hljs-string">&quot;Access-Control-Allow-Origin&quot;</span>, req.headers.origin || <span class="hljs-string">&quot;*&quot;</span>);<br>    resp.setHeader(<span class="hljs-string">&quot;Access-Control-Allow-Methods&quot;</span>, <span class="hljs-string">&quot;GET,POST,PUT,DELETE,OPTIONS&quot;</span>);<br>    next();<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>最后在后面的拦截器里面进行拦截，注意，拦截的时候一定是在路由之前</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//再次设置一个拦截器,拦截所有的请求,看它有没有令牌</span><br>app.use(<span class="hljs-function">(<span class="hljs-params">req, resp, next</span>) =&gt;</span> &#123;<br>    <span class="hljs-keyword">let</span> pathValidate = AppConfig.excludePath.some(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item.test(req.path));<br>    <span class="hljs-keyword">if</span> (pathValidate) &#123;<br>        <span class="hljs-comment">//说明这个路径 应该放行</span><br>        next();<br>    &#125;<br>    <span class="hljs-keyword">else</span> &#123;<br>        <span class="hljs-comment">//不在排除的路径以外,这个时候要进一步的检测</span><br>        <span class="hljs-keyword">if</span> (req.method.toUpperCase() === <span class="hljs-string">&quot;OPTIONS&quot;</span>) &#123;<br>            <span class="hljs-comment">//说明是预检请求,也要放行</span><br>            next();<br>        &#125;<br>        <span class="hljs-keyword">else</span> &#123;<br>            <span class="hljs-comment">//拿到header里面的token</span><br>            <span class="hljs-keyword">let</span> token = req.headers.rental_house_token;<br>            <span class="hljs-keyword">if</span> (token) &#123;<br>                <span class="hljs-comment">//有token</span><br>                jwt.verify(token, AppConfig.jwtKey, <span class="hljs-function">(<span class="hljs-params">error, decoded</span>) =&gt;</span> &#123;<br>                    <span class="hljs-keyword">if</span> (error) &#123;<br>                        resp.status(<span class="hljs-number">403</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, <span class="hljs-string">&quot;当前token无效&quot;</span>));<br>                    &#125;<br>                    <span class="hljs-keyword">else</span> &#123;<br>                        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&quot;当前解密以后的东西就是&quot;</span>);<br>                        <span class="hljs-built_in">console</span>.log(decoded);<br>                        next();<br>                    &#125;<br>                &#125;);<br>            &#125;<br>            <span class="hljs-keyword">else</span> &#123;<br>                resp.status(<span class="hljs-number">403</span>).json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, <span class="hljs-string">&quot;当前请求无权限&quot;</span>));<br>            &#125;<br>        &#125;<br>    &#125;<br>&#125;);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>在上面的代码里面，我们看到token在验证成功以后，会解密出一个对象，这个对象的格式如下</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br><span class="hljs-attr">adminInfo</span>: &#123;<br><span class="hljs-attr">id</span>: <span class="hljs-number">10004</span>,<br><span class="hljs-attr">admin_name</span>: <span class="hljs-string">&#x27;杨标&#x27;</span>,<br><span class="hljs-attr">admin_sex</span>: <span class="hljs-string">&#x27;男&#x27;</span>,<br><span class="hljs-attr">admin_tel</span>: <span class="hljs-string">&#x27;18627109999&#x27;</span>,<br><span class="hljs-attr">admin_pwd</span>: <span class="hljs-string">&#x27;e82be49a2633eabfcbd436ec4e4a8041&#x27;</span>,<br><span class="hljs-attr">admin_email</span>: <span class="hljs-string">&#x27;lovesnsfi@163.com&#x27;</span>,<br><span class="hljs-attr">admin_photo</span>: <span class="hljs-string">&#x27;/adminPhoto/9e9e7e60a89cc8eb115382d386692a0b2018上.jpg&#x27;</span>,<br><span class="hljs-attr">admin_address</span>: <span class="hljs-string">&#x27;湖北省 武汉市 江夏区 光谷大道金融港B27栋&#x27;</span>,<br><span class="hljs-attr">isDel</span>: <span class="hljs-number">0</span><br>&#125;,<br><span class="hljs-attr">iat</span>: <span class="hljs-number">1635327437</span>,<br><span class="hljs-attr">exp</span>: <span class="hljs-number">1635329237</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>这里面的东西就是我们之前在颁发令牌的时候的东西</p>
</blockquote>
<h3 id="四十一、ajax响应拦截【重点】"><a href="#四十一、ajax响应拦截【重点】" class="headerlink" title="四十一、ajax响应拦截【重点】"></a>四十一、ajax响应拦截【重点】</h3><p>在上面的请求过程当中，我们的每一次请求都会携带token到服务器，如果验证通过就会得到数据，通不过就会返回状态<code>403</code>,所以403就一定是没有权限，而<code>ajax</code>的请求里面<code>200</code>才算成功，其它 的都算错误，所以正是因为有这个特点，我们可以在<code>ajax</code>响应的时候做一次拦截处理</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * 将原来jQuery里面的ajax封装成一个Promise的处理方式</span><br><span class="hljs-comment"> */</span><br><span class="hljs-keyword">var</span> request = &#123;<br>    <span class="hljs-attr">get</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">url, data</span>) </span>&#123;<br>        <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">resolve, reject</span>) </span>&#123;<br>            $.ajax(&#123;<br>                <span class="hljs-attr">url</span>: baseURL + url,<br>                <span class="hljs-attr">method</span>: <span class="hljs-string">&quot;get&quot;</span>,<br>                <span class="hljs-attr">data</span>: data,<br>                <span class="hljs-attr">beforeSend</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">xhr</span>) </span>&#123;<br>                    <span class="hljs-comment">//检测一下sessionStorage有没有rental_house_token这个缓存</span><br>                    <span class="hljs-keyword">var</span> rental_house_token = sessionStorage.getItem(<span class="hljs-string">&quot;rental_house_token&quot;</span>);<br>                    <span class="hljs-keyword">if</span> (rental_house_token) &#123;<br>                        xhr.setRequestHeader(<span class="hljs-string">&quot;rental_house_token&quot;</span>, rental_house_token);<br>                    &#125;<br>                    <span class="hljs-keyword">return</span> xhr;<br>                &#125;,<br>                <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">res</span>) </span>&#123;<br>                    resolve(res);<br>                &#125;,<br>                <span class="hljs-attr">error</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) </span>&#123;<br>                    <span class="hljs-comment">//关键就是这里</span><br>                    <span class="hljs-keyword">if</span> (error.status == <span class="hljs-number">403</span>) &#123;<br>                        top.location.replace(<span class="hljs-string">&quot;/login.html&quot;</span>)<br>                    &#125;<br>                    reject(error);<br>                &#125;,<br>            &#125;);<br>        &#125;);<br>    &#125;,<br>    <span class="hljs-comment">//POST请求是一样的，所以省略代码.....</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p><img src="https://pic.imgdb.cn/item/617b409d2ab3f51d9198fe1f.png" srcset="/blog/img/loading.gif" lazyload></p>
<h3 id="四十二、编辑管理员"><a href="#四十二、编辑管理员" class="headerlink" title="四十二、编辑管理员"></a>四十二、编辑管理员</h3><h3 id="四十三、数据可视化echarts【新型应用点】"><a href="#四十三、数据可视化echarts【新型应用点】" class="headerlink" title="四十三、数据可视化echarts【新型应用点】"></a>四十三、数据可视化echarts【新型应用点】</h3><p>数据可视化并不是一个新的技术，它只是一个新的叫法，在以前叫echarts图形图表，就是把数据用图表的方式展示出来</p>
<p>要实现数据可视化的技术，目前主要使用的有以下几个框架</p>
<ol>
<li><code>echarts</code>百度图形图表<a target="_blank" rel="noopener" href="https://echarts.apache.org/zh/index.html">Apache ECharts</a>、</li>
<li><code>hicharts</code>图形图表<a target="_blank" rel="noopener" href="https://www.highcharts.com.cn/">兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts</a></li>
</ol>
<p>因为hicharts的使用需要授权，所以我们使用echarts来完成</p>
<p><img src="https://pic.imgdb.cn/item/617b419d2ab3f51d9199bd99.jpg" srcset="/blog/img/loading.gif" lazyload alt="image-20211028113933080"></p>
<p>新建了一个路由，完成相关的数据操作</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;express&quot;</span>);<br><span class="hljs-keyword">const</span> router = express.Router();<br><span class="hljs-keyword">const</span> ServiceFactory = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;../factory/ServiceFactory.js&quot;</span>);<br><span class="hljs-keyword">const</span> ResultJson = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;../model/ResultJson&quot;</span>);<br><br>router.get(<span class="hljs-string">&quot;/getTotalData&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.dataViewService.getTotalData();<br>    <span class="hljs-keyword">if</span> (results.length &gt; <span class="hljs-number">0</span>) &#123;<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">true</span>, <span class="hljs-string">&quot;数据请求成功&quot;</span>, results[<span class="hljs-number">0</span>]));<br>    &#125;<br>    <span class="hljs-keyword">else</span> &#123;<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, <span class="hljs-string">&quot;请求不到数据&quot;</span>));<br>    &#125;<br>&#125;);<br><br>router.get(<span class="hljs-string">&quot;/getRoomCategoryData&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.dataViewService.getRoomCategoryData();<br>    <span class="hljs-keyword">if</span> (results.length &gt; <span class="hljs-number">0</span>) &#123;<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">true</span>, <span class="hljs-string">&quot;数据请求成功&quot;</span>, results));<br>    &#125;<br>    <span class="hljs-keyword">else</span> &#123;<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, <span class="hljs-string">&quot;请求不到数据&quot;</span>));<br>    &#125;<br>&#125;);<br><br><br>router.get(<span class="hljs-string">&quot;/getAreaTotalCount&quot;</span>, <span class="hljs-keyword">async</span> (req, resp) =&gt; &#123;<br>    <span class="hljs-keyword">let</span> results = <span class="hljs-keyword">await</span> ServiceFactory.dataViewService.getAreaTotalCount();<br>    <span class="hljs-keyword">if</span> (results.length &gt; <span class="hljs-number">0</span>) &#123;<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">true</span>, <span class="hljs-string">&quot;数据请求成功&quot;</span>, results));<br>    &#125;<br>    <span class="hljs-keyword">else</span> &#123;<br>        resp.json(<span class="hljs-keyword">new</span> ResultJson(<span class="hljs-literal">false</span>, <span class="hljs-string">&quot;请求不到数据&quot;</span>));<br>    &#125;<br>&#125;);<br><span class="hljs-built_in">module</span>.exports = router;<br></code></pre></td></tr></table></figure>

<p>然后再新建一个service，完成数据库的操作</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@description </span>不操作任何单独的表</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@author </span>杨标</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@version </span>1.0</span><br><span class="hljs-comment"> */</span><br><br><span class="hljs-keyword">const</span> BaseServcie = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;./BaseService.js&quot;</span>);<br><span class="hljs-keyword">const</span> PageList = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;../model/PageList.js&quot;</span>);<br><br><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DataViewService</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">BaseServcie</span> </span>&#123;<br>    <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-built_in">super</span>();<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>一次性获取管理员，学生，房间的总数</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;[]&gt;&#125;</span> </span>返回查询结果 </span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-function"><span class="hljs-title">getTotalData</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">`</span><br><span class="hljs-string">            select </span><br><span class="hljs-string">            max(</span><br><span class="hljs-string">                case when t1.admin_total_count =&#x27;admin_total_count&#x27; then total_count end</span><br><span class="hljs-string">            ) &#x27;admin_total_count&#x27;,</span><br><span class="hljs-string">            max(</span><br><span class="hljs-string">                case when t1.admin_total_count =&#x27;stu_total_count&#x27; then total_count end</span><br><span class="hljs-string">            ) &#x27;stu_total_count&#x27;,</span><br><span class="hljs-string">            max(</span><br><span class="hljs-string">                case when t1.admin_total_count =&#x27;room_total_count&#x27; then total_count end</span><br><span class="hljs-string">            ) &#x27;room_total_count&#x27;</span><br><span class="hljs-string">            from </span><br><span class="hljs-string">            (select &#x27;admin_total_count&#x27;,count(*) &#x27;total_count&#x27; from admin_info where isDel = false</span><br><span class="hljs-string">            UNION ALL</span><br><span class="hljs-string">            SELECT &#x27;stu_total_count&#x27; , count(*) &#x27;total_count&#x27; from stu_info where isDel = false</span><br><span class="hljs-string">            UNION ALL</span><br><span class="hljs-string">            SELECT &#x27;room_total_count&#x27;, count(*) &#x27;total_count&#x27; from room_info where isDel = false) t1</span><br><span class="hljs-string">        `</span>;<br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.executeSql(strSql);<br>    &#125;<br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>获取房间的分类信息</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;[]&gt;&#125;</span> </span>获取房间的分类信息</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-function"><span class="hljs-title">getRoomCategoryData</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">`</span><br><span class="hljs-string">        select t1.room_type,count(*) &#x27;total_count&#x27; from </span><br><span class="hljs-string">            (select SUBSTR(room_name,3,1) &#x27;room_type&#x27; from room_info where isDel = false ) t1</span><br><span class="hljs-string">            group by t1.room_type</span><br><span class="hljs-string">        `</span>;<br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.executeSql(strSql);<br>    &#125;<br><br>    <span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>获取房间信息里面分区域汇总的图</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;[]&gt;&#125;</span> </span>返回查询结果</span><br><span class="hljs-comment">     */</span><br>    <span class="hljs-function"><span class="hljs-title">getAreaTotalCount</span>(<span class="hljs-params"></span>)</span> &#123;<br>        <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">`</span><br><span class="hljs-string">        select t1.q_name,count(*) &#x27;q_count&#x27; from </span><br><span class="hljs-string">        (select left(room_name,1) &#x27;q_name&#x27; from room_info where isDel = false) t1</span><br><span class="hljs-string">        group by t1.q_name;        </span><br><span class="hljs-string">        `</span>;<br>        <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.executeSql(strSql);<br>    &#125;<br>&#125;<br><span class="hljs-built_in">module</span>.exports = DataViewService;<br></code></pre></td></tr></table></figure>

<blockquote>
<p>这里要注意一点，所有的Service新建 以后都是了要在<code>ServiceFactory</code>里面添加注释 ，这样写代码就会有提示，同时要注意添加代码注释的格式</p>
<ul>
<li>首字母是小写的</li>
<li>注意路径</li>
</ul>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment"> * <span class="hljs-doctag">@typedef <span class="hljs-variable">ServiceFactoryType</span></span></span><br><span class="hljs-comment"> * <span class="hljs-doctag">@property <span class="hljs-type">&#123;import(&quot;../service/RoomInfoService.js&quot;)&#125;</span> <span class="hljs-variable">roomInfoService</span></span></span><br><span class="hljs-comment"> * <span class="hljs-doctag">@property <span class="hljs-type">&#123;import(&quot;../service/AreaService.js&quot;)&#125;</span> <span class="hljs-variable">areaService</span></span></span><br><span class="hljs-comment"> * <span class="hljs-doctag">@property <span class="hljs-type">&#123;import(&quot;../service/AdminInfoService&quot;)&#125;</span> <span class="hljs-variable">adminInfoService</span></span></span><br><span class="hljs-comment"> * <span class="hljs-doctag">@property <span class="hljs-type">&#123;import(&quot;../service/DataViewService&quot;)&#125;</span> <span class="hljs-variable">dataViewService</span></span></span><br><span class="hljs-comment"> */</span><br></code></pre></td></tr></table></figure>

<p><strong>最后是前端的代码了</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 图形图表的部分 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;card mt-2&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;card-header h4 text-info&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bi bi-house-door-fill&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><br>        房间信息<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;card-body&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;row&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-6&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;echarts1&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100%;min-height: 500px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;col-sm-6&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;echarts2&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100%;min-height: 500px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span><br><span class="javascript">	<span class="hljs-comment">//省略了部分代码</span></span><br><span class="javascript">    $(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">       <span class="hljs-comment">//百度的图形图表在使用之前一定要先导入它的js文件，然后初始化区域</span></span><br><span class="javascript">        <span class="hljs-keyword">var</span> echarts1 = echarts.init(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;echarts1&#x27;</span>));</span><br><span class="javascript">        request.get(<span class="hljs-string">&quot;/dataView/getRoomCategoryData&quot;</span>).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">if</span> (res.status == <span class="hljs-string">&quot;success&quot;</span>) &#123;</span><br><span class="javascript">                <span class="hljs-comment">// 指定图表的配置项和数据</span></span><br><span class="javascript">                <span class="hljs-keyword">var</span> option1 = &#123;</span><br><span class="javascript">                    <span class="hljs-attr">color</span>: [<span class="hljs-string">&quot;#d32f2f&quot;</span>],</span><br><span class="javascript">                    <span class="hljs-attr">title</span>: &#123;</span><br><span class="javascript">                        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;房间类型图&#x27;</span></span><br><span class="javascript">                    &#125;,</span><br><span class="javascript">                    <span class="hljs-attr">tooltip</span>: &#123;&#125;,</span><br><span class="javascript">                    <span class="hljs-attr">legend</span>: &#123;</span><br><span class="javascript">                        <span class="hljs-attr">data</span>: [<span class="hljs-string">&#x27;数量&#x27;</span>]</span><br><span class="javascript">                    &#125;,</span><br><span class="javascript">                    <span class="hljs-attr">xAxis</span>: &#123;</span><br><span class="javascript">                        <span class="hljs-attr">data</span>: []</span><br><span class="javascript">                    &#125;,</span><br><span class="javascript">                    <span class="hljs-attr">yAxis</span>: &#123;&#125;,</span><br><span class="javascript">                    <span class="hljs-attr">series</span>: [&#123;</span><br><span class="javascript">                        <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;数量&#x27;</span>,</span><br><span class="javascript">                        <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;bar&#x27;</span>,</span><br><span class="javascript">                        <span class="hljs-attr">data</span>: []</span><br><span class="javascript">                    &#125;]</span><br><span class="javascript">                &#125;;</span><br><span class="javascript">                <span class="hljs-keyword">let</span> nameObj = &#123;</span><br><span class="javascript">                    <span class="hljs-attr">s</span>: <span class="hljs-string">&quot;单间&quot;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">b</span>: <span class="hljs-string">&quot;标间&quot;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">t</span>: <span class="hljs-string">&quot;套间&quot;</span></span><br><span class="javascript">                &#125;;</span><br><span class="javascript">                <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; res.data.length; i++) &#123;</span><br><span class="javascript">                    option1.xAxis.data.push(nameObj[res.data[i].room_type]);</span><br><span class="javascript">                    option1.series[<span class="hljs-number">0</span>].data.push(res.data[i].total_count);</span><br><span class="javascript">                &#125;</span><br><span class="javascript">                echarts1.setOption(option1);</span><br><span class="javascript">            &#125;</span><br><span class="javascript">        &#125;).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>&#123;</span><br><span class="javascript">            Qmsg.error(<span class="hljs-string">&quot;服务器错误&quot;</span>);</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(error);</span><br><span class="javascript">        &#125;);</span><br><span class="javascript"></span><br><span class="javascript"></span><br><span class="javascript">        <span class="hljs-keyword">var</span> echarts2 = echarts.init(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;echarts2&#x27;</span>));</span><br><span class="javascript">        request.get(<span class="hljs-string">&quot;/dataView/getAreaTotalCount&quot;</span>).then(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">res</span>) </span>&#123;</span><br><span class="javascript">            <span class="hljs-keyword">var</span> option2 = &#123;</span><br><span class="javascript">                <span class="hljs-attr">title</span>: &#123;</span><br><span class="javascript">                    <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;房间区域分图&#x27;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">subtext</span>: <span class="hljs-string">&#x27;按区域来划分&#x27;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">left</span>: <span class="hljs-string">&#x27;center&#x27;</span></span><br><span class="javascript">                &#125;,</span><br><span class="javascript">                <span class="hljs-attr">tooltip</span>: &#123;</span><br><span class="javascript">                    <span class="hljs-attr">trigger</span>: <span class="hljs-string">&#x27;item&#x27;</span></span><br><span class="javascript">                &#125;,</span><br><span class="javascript">                <span class="hljs-attr">legend</span>: &#123;</span><br><span class="javascript">                    <span class="hljs-attr">orient</span>: <span class="hljs-string">&#x27;vertical&#x27;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">left</span>: <span class="hljs-string">&#x27;left&#x27;</span></span><br><span class="javascript">                &#125;,</span><br><span class="javascript">                <span class="hljs-attr">series</span>: [&#123;</span><br><span class="javascript">                    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;当前信息&#x27;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;pie&#x27;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">radius</span>: <span class="hljs-string">&#x27;50%&#x27;</span>,</span><br><span class="javascript">                    <span class="hljs-attr">data</span>: [],</span><br><span class="javascript">                    <span class="hljs-attr">emphasis</span>: &#123;</span><br><span class="javascript">                        <span class="hljs-attr">itemStyle</span>: &#123;</span><br><span class="javascript">                            <span class="hljs-attr">shadowBlur</span>: <span class="hljs-number">10</span>,</span><br><span class="javascript">                            <span class="hljs-attr">shadowOffsetX</span>: <span class="hljs-number">0</span>,</span><br><span class="javascript">                            <span class="hljs-attr">shadowColor</span>: <span class="hljs-string">&#x27;rgba(0, 0, 0, 0.5)&#x27;</span></span><br><span class="javascript">                        &#125;</span><br><span class="javascript">                    &#125;</span><br><span class="javascript">                &#125;]</span><br><span class="javascript">            &#125;;</span><br><span class="javascript">            option2.series[<span class="hljs-number">0</span>].data = res.data.map(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">item</span>) </span>&#123;</span><br><span class="javascript">                <span class="hljs-keyword">return</span> &#123;</span><br><span class="javascript">                    <span class="hljs-attr">name</span>: item.q_name,</span><br><span class="javascript">                    <span class="hljs-attr">value</span>: item.q_count</span><br><span class="javascript">                &#125;</span><br><span class="javascript">            &#125;);</span><br><span class="javascript">            echarts2.setOption(option2);</span><br><span class="javascript">        &#125;).catch(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) </span>&#123;</span><br><span class="javascript">            Qmsg.error(<span class="hljs-string">&quot;服务器错误&quot;</span>);</span><br><span class="javascript">            <span class="hljs-built_in">console</span>.log(error);</span><br><span class="javascript">        &#125;); </span><br><span class="javascript">    &#125;);</span><br><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="四十四、主外键关联操作【重点】"><a href="#四十四、主外键关联操作【重点】" class="headerlink" title="四十四、主外键关联操作【重点】"></a>四十四、主外键关联操作【重点】</h3><p><img src="https://pic.imgdb.cn/item/617b422d2ab3f51d919a1e4d.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211028183502500"></p>
<p>我们现有了学生表与房间表，这个时候就要构建主外键关系，如上图所示</p>
<p><img src="https://pic.imgdb.cn/item/617b42422ab3f51d919a2d75.png" srcset="/blog/img/loading.gif" lazyload alt="image-20211028192138890"></p>
<p>上图就是我们做的第一个版本，这个版本有个问题，不能看到当前的房间里面有多少人</p>
<p>这个时候我们可以在<code>RoomInfoService</code>里面编写如下的方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/**</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@description </span>获取没有住东江环保的房间</span><br><span class="hljs-comment">     * <span class="hljs-doctag">@returns <span class="hljs-type">&#123;Promise&lt;[]&gt;&#125;</span></span></span><br><span class="hljs-comment">*/</span><br><span class="hljs-function"><span class="hljs-title">getNotFullRoomList</span>(<span class="hljs-params"></span>)</span> &#123;<br>    <span class="hljs-keyword">let</span> strSql = <span class="hljs-string">` select * from  </span><br><span class="hljs-string">(select *,</span><br><span class="hljs-string">(select count(*) from <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.tableMap.stu_info&#125;</span> where rid = room_info.id) &#x27;real_count&#x27;</span><br><span class="hljs-string">from <span class="hljs-subst">$&#123;<span class="hljs-built_in">this</span>.tableMap.room_info&#125;</span> where isDel = FALSE) t1</span><br><span class="hljs-string">where t1.real_count&lt;t1.max_count</span><br><span class="hljs-string">`</span>;<br>    <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.executeSql(strSql);<br>&#125;<br></code></pre></td></tr></table></figure>


            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/blog/categories/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/">前端笔记</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/blog/tags/JavaScript/">JavaScript</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/MySQL/">MySQL</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/Sass/">Sass</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/Vue/">Vue</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/Express/">Express</a>
                    
                      <a class="hover-with-bg" href="/blog/tags/Node/">Node</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/blog/2021/12/06/%E7%9F%A5%E8%AF%86%E7%82%B9-%E4%BE%8B%E9%A2%98-%E6%8A%80%E5%B7%A7/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">知识点-例题-技巧</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/blog/2021/12/02/webpack%E7%AC%94%E8%AE%B0/">
                        <span class="hidden-mobile">webpack</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" ></script>
<script  src="/blog/js/events.js" ></script>
<script  src="/blog/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/blog/js/img-lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.3/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.1/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js" ></script>



  <script  src="/blog/js/local-search.js" ></script>






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>









  <script  src="https://cdn.jsdelivr.net/npm/mermaid@8.10.1/dist/mermaid.min.js" ></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({"theme":"default"});
    }
  </script>







<!-- 主题的启动项 保持在最底部 -->
<script  src="/blog/js/boot.js" ></script>


</body>
</html>
